<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/blog/blog/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/blog/blog/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta property="og:type" content="website">
<meta property="og:title" content="斯人若彩虹 遇上方知有">
<meta property="og:url" content="https://bruce-jj.gitee.io/blog/page/2/index.html">
<meta property="og:site_name" content="斯人若彩虹 遇上方知有">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="何水浪">
<meta name="twitter:card" content="summary"><title>斯人若彩虹 遇上方知有</title><link ref="canonical" href="https://bruce-jj.gitee.io/blog/page/2/index.html"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="/blog/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
  root: '/blog/',
  algolia: undefined,
  assistSearch: undefined,
  fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
  sidebar: {"offsetTop":"20px","tocMaxDepth":6},
  header: {"enable":true,"showOnPost":true,"scrollDownIcon":false},
  postWidget: {"endText":true},
  nightMode: {"enable":true},
  back2top: {"enable":true},
  codeblock: {"style":"default","highlight":"light","wordWrap":false},
  reward: false,
  fancybox: false,
  zoomImage: {"gapAside":"20px"},
  galleryWaterfall: undefined,
  lazyload: false,
  pjax: undefined,
  externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
  shortcuts: undefined,
  prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
  sourcePath: {"js":"js","css":"css","images":"images"},
};

window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/blog/atom.xml" title="斯人若彩虹 遇上方知有" type="application/atom+xml">
</head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/blog/friends/"><span class="header-nav-menu-item__icon"><i class="fas fa-link"></i></span><span class="header-nav-menu-item__text">友链</span></a></div></div><div class="header-nav-search"><span class="header-nav-search__icon"><i class="fas fa-search"></i></span><span class="header-nav-search__text">搜索</span></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">斯人若彩虹 遇上方知有</div><div class="header-banner-info__subtitle"></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content content-home" id="content"><section class="postlist"><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/05/07/hexo%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E4%BB%A5%E5%8F%8A%E5%B8%B8%E8%A7%81%E9%94%99%E8%AF%AF/">Hexo学习笔记以及常见错误</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-05-07</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-14</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">881</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">6分</span></span></div></header><div class="post-body"><div class="post-excerpt">
        <h1 id="前提，注意！"   >
          <a href="#前提，注意！" class="heading-link"><i class="fas fa-link"></i></a><a href="#前提，注意！" class="headerlink" title="前提，注意！"></a>前提，注意！</h1>
      <p><strong>在进行任何更改后，务必进行以下代码：</strong></p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在本地看到效果，而不部署git</span></span><br><span class="line">hexo clean &amp; hexo s</span><br><span class="line"></span><br><span class="line"><span class="comment">//想在git上（比如码云或者github）看到效果</span></span><br><span class="line">hexo clean &amp; hexo g &amp; hexo d</span><br></pre></td></tr></table></div></figure>

<p><strong>在输入hexo g后 才会生成public目录</strong></p>

        <h1 id="引入别人的主题若启动时报以下错误"   >
          <a href="#引入别人的主题若启动时报以下错误" class="heading-link"><i class="fas fa-link"></i></a><a href="#引入别人的主题若启动时报以下错误" class="headerlink" title="引入别人的主题若启动时报以下错误"></a>引入别人的主题若启动时报以下错误</h1>
      <p><strong>extends includes/layout.pug block content include includes/recent-posts.pug include includes/partial</strong></p>
<p>则在博客根路径中，键入以下代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive</span><br></pre></td></tr></table></div></figure>

<p><mark> 在使用别人的主题过程中，一定要去看别人发布的关于这个主题的使用文档！ </mark></p>
<p><mark>看文档！</mark></p>
<p><mark>看文档！</mark></p>
<p><mark>看文档！</mark></p>

        <h1 id="博客中的文章字数统计插件"   >
          <a href="#博客中的文章字数统计插件" class="heading-link"><i class="fas fa-link"></i></a><a href="#博客中的文章字数统计插件" class="headerlink" title="博客中的文章字数统计插件"></a>博客中的文章字数统计插件</h1>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-wordcount --save</span><br></pre></td></tr></table></div></figure>
<p>然后在主题中的配置文件中打开wordcount:<br><img   src="https://img-blog.csdnimg.cn/20210507104215942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h1 id="博客中的本地搜索插件"   >
          <a href="#博客中的本地搜索插件" class="heading-link"><i class="fas fa-link"></i></a><a href="#博客中的本地搜索插件" class="headerlink" title="博客中的本地搜索插件"></a>博客中的本地搜索插件</h1>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-json-content --save</span><br></pre></td></tr></table></div></figure>
<ol>
<li><p>在blog根目录中的<code>config.yml</code>中，键入代码：</p>
 <figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 本地搜索</span></span><br><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.json</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="attr">content:</span> <span class="literal">true</span></span><br></pre></td></tr></table></div></figure></li>
<li><p>在自己的主题目录下的<code>config.yml</code>中打开本地搜索，键入代码：</p>
 <figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">local_search:</span></span><br><span class="line">  		<span class="comment"># 是否启用</span></span><br><span class="line">  		<span class="attr">enable:</span> <span class="literal">true</span></span><br></pre></td></tr></table></div></figure>

        <h1 id="博客中的Valine评论（前提是上传到Gitee或者GitHub）"   >
          <a href="#博客中的Valine评论（前提是上传到Gitee或者GitHub）" class="heading-link"><i class="fas fa-link"></i></a><a href="#博客中的Valine评论（前提是上传到Gitee或者GitHub）" class="headerlink" title="博客中的Valine评论（前提是上传到Gitee或者GitHub）"></a>博客中的Valine评论（前提是上传到Gitee或者GitHub）</h1>
      </li>
<li><p>首先在主题中的<code>config.yml</code>中 找到对应Valine的区域enable相应的Valine插件</p>
 <figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Valine</span></span><br><span class="line"><span class="comment"># See: https://valine.js.org/quickstart.html</span></span><br><span class="line"><span class="attr">valine:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Your leancloud application appid.</span></span><br><span class="line">  <span class="attr">appid:</span> <span class="string">LeanCloud上创建的appid</span></span><br><span class="line">  <span class="comment"># Your leancloud application appkey.</span></span><br><span class="line">  <span class="attr">appkey:</span> <span class="string">LeanCloud上创建的appkey</span>	  </span><br><span class="line">  <span class="comment"># Mail notifier.</span></span><br><span class="line">  <span class="attr">notify:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Verification code.</span></span><br><span class="line">  <span class="attr">verify:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># Comment box placeholder.</span></span><br><span class="line">  <span class="attr">placeholder:</span> <span class="string">说点啥再走呗~爱你</span></span><br><span class="line">  <span class="comment"># Gravatar style.</span></span><br><span class="line">  <span class="attr">avatar:</span> <span class="string">mp</span></span><br><span class="line">  <span class="comment"># Custom comment header.</span></span><br><span class="line">  <span class="attr">meta:</span> <span class="string">nick,email</span></span><br><span class="line">  <span class="comment"># Pagination size.</span></span><br><span class="line">  <span class="attr">pageSize:</span> <span class="number">10</span></span><br><span class="line">  <span class="comment"># Article reading statistics.</span></span><br><span class="line">  <span class="attr">visitor:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Whether to record the commenter IP.</span></span><br><span class="line">  <span class="attr">recordIP:</span> <span class="literal">false</span></span><br><span class="line">  <span class="comment"># Optional values: en | zh-cn</span></span><br><span class="line">  <span class="attr">language:</span></span><br></pre></td></tr></table></div></figure></li>
<li><p>去<strong>LeanCloud上注册相关应用并打开你的白名单域名</strong>（设置，安全中心）<span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://vincent990413.gitee.io/myblog/%E6%A0%B9%E7%9B%AE%E5%BD%95%EF%BC%8C%E6%AF%94%E5%A6%82%EF%BC%9A%60https://vincent990413.gitee.io/myblog/%60" >https://vincent990413.gitee.io/myblog/根目录，比如：`https://vincent990413.gitee.io/myblog/`</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</li>
<li><p>写完博客，成功<strong>部署到这个白名单页面</strong>即可。</p>
</li>
</ol>

        <h1 id="部署到Gitee过程以及会出现的错误"   >
          <a href="#部署到Gitee过程以及会出现的错误" class="heading-link"><i class="fas fa-link"></i></a><a href="#部署到Gitee过程以及会出现的错误" class="headerlink" title="部署到Gitee过程以及会出现的错误"></a>部署到Gitee过程以及会出现的错误</h1>
      <ol>
<li><p>Gitee创建项目 并获得Git拉取地址(….xxx.git)<br><img   src="https://img-blog.csdnimg.cn/20210507110157389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https:<span class="comment">//gitee.com/vincent990413/myblog.git</span></span><br></pre></td></tr></table></div></figure></li>
<li><p>在博客根目录配置文件中指定提交的git地址</p>
<figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="comment"># 这个是克隆项目时的地址！</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">https://gitee.com/vincent990413/myblog.git</span></span><br><span class="line">  <span class="attr">branch:</span> <span class="string">master</span></span><br></pre></td></tr></table></div></figure></li>
<li><p>在博客根目录配置文件中引入资源根地址</p>
<figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># URL</span></span><br><span class="line"><span class="comment">## Set your site url here. For example, if you use GitHub Page, set url as &#x27;https://username.github.io/project&#x27;</span></span><br><span class="line"><span class="attr">url:</span> <span class="string">https://vincent990413.gitee.io/myblog</span></span><br><span class="line"><span class="attr">root:</span> <span class="string">/myblog/</span></span><br></pre></td></tr></table></div></figure></li>
</ol>

        <h1 id="部署项目时出现403-have-no-permission错误"   >
          <a href="#部署项目时出现403-have-no-permission错误" class="heading-link"><i class="fas fa-link"></i></a><a href="#部署项目时出现403-have-no-permission错误" class="headerlink" title="部署项目时出现403 have no permission错误"></a>部署项目时出现403 have no permission错误</h1>
      <p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://blog.csdn.net/zy_crazy_code/article/details/111227472" >点我看解决方案（转）</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>

        <h1 id="部署项目到github-amp-gitee上"   >
          <a href="#部署项目到github-amp-gitee上" class="heading-link"><i class="fas fa-link"></i></a><a href="#部署项目到github-amp-gitee上" class="headerlink" title="部署项目到github&amp;gitee上"></a>部署项目到github&amp;gitee上</h1>
      <p>如果出现Can’t access… 就是网络问题，重复部署即可。</p>

        <h1 id="部署到Github"   >
          <a href="#部署到Github" class="heading-link"><i class="fas fa-link"></i></a><a href="#部署到Github" class="headerlink" title="部署到Github"></a>部署到Github</h1>
      <p>只需要改动博客根目录下的配置文件即可（前提是主题中的配置文件等导航栏、静态图片引入正确）：</p>
<figure class="highlight yml"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 访问项目的URL</span></span><br><span class="line"><span class="comment">## Set your site url here. For example, if you use GitHub Page, </span></span><br><span class="line"><span class="comment">## set url as &#x27;https://username.github.io/project&#x27;</span></span><br><span class="line"><span class="attr">url:</span> <span class="string">https://vincent990413.github.io/</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 部署项目的git地址</span></span><br><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="comment"># 这个是克隆项目时的地址！</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="string">https://github.com/vincent990413/vincent990413.github.io.git</span></span><br><span class="line">  <span class="attr">branch:</span> <span class="string">master</span></span><br></pre></td></tr></table></div></figure>

<p>注意：当部署到Gitee码云时，如果页面的静态资源文件无法正常显示，很有可能时引用问题。</p>
<p>比如:<br>如果引入某个照片，如果是部署到Github下，键入代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">url: <span class="regexp">/images/my</span>Photo.jpg</span><br></pre></td></tr></table></div></figure>

<p>如果是引入到Gitee中，键入代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">url: <span class="regexp">/本页上方关于部署到Gitee git地址末尾的二级目录/im</span>ages/myPhoto.jpg</span><br><span class="line"><span class="attr">url</span>: <span class="regexp">/myblog/im</span>ages/myPhoto.jpg</span><br></pre></td></tr></table></div></figure>

<p>而且，需要将静态资源文件，放在根目录以及主题目录的两个source目录下（都要放）。</p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/05/07/%E8%8B%B1%E8%AF%AD%E5%AD%A6%E4%B9%A0-16%E4%B8%AA%E4%BB%A3%E6%9B%BFvery%E7%9A%84%E8%A1%A8%E8%BE%BE/">英语学习_16个代替very的表达</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-05-07</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-07</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">100</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">1分</span></span></div></header><div class="post-body"><div class="post-excerpt">
        <h1 id="Get-rid-of-“Very-X”"   >
          <a href="#Get-rid-of-“Very-X”" class="heading-link"><i class="fas fa-link"></i></a><a href="#Get-rid-of-“Very-X”" class="headerlink" title="Get rid of “Very X”"></a>Get rid of “Very X”</h1>
      
        <h2 id="16个代替very-adj-的表达"   >
          <a href="#16个代替very-adj-的表达" class="heading-link"><i class="fas fa-link"></i></a><a href="#16个代替very-adj-的表达" class="headerlink" title="16个代替very + adj 的表达"></a>16个代替very + adj 的表达</h2>
      <div class="table-container"><table>
<thead>
<tr>
<th>普通表达</th>
<th>进阶表达</th>
</tr>
</thead>
<tbody><tr>
<td>Very beautiful</td>
<td>Charming, Gorgeous, Stunning</td>
</tr>
<tr>
<td>Very tired</td>
<td>Exhausted, Completely exhausted</td>
</tr>
<tr>
<td>Very sad</td>
<td>Heart-broken, Devastated</td>
</tr>
<tr>
<td>Very happy</td>
<td>Delighted, Thrilled, Be on cloud nine</td>
</tr>
<tr>
<td>Very surprise</td>
<td>Amazed, Astonished</td>
</tr>
<tr>
<td>Very small</td>
<td>Tiny, Minuscale</td>
</tr>
<tr>
<td>Very big</td>
<td>Huge, Massive, Giant, Tremendous,  Humongous</td>
</tr>
<tr>
<td>Very bad</td>
<td>Horrible, Terrible, Awful, Horrendous</td>
</tr>
<tr>
<td>Very diffcult</td>
<td>Challenging, Demanding</td>
</tr>
<tr>
<td>Very simple</td>
<td>A piece of cake, Staightforward</td>
</tr>
<tr>
<td>Very smart</td>
<td>Witty, Brilliant, Intelligent</td>
</tr>
<tr>
<td>Very important</td>
<td>Crucial, Vital, Essential</td>
</tr>
<tr>
<td>Very interesting</td>
<td>Fascinating, Captivating</td>
</tr>
<tr>
<td>Very hungry</td>
<td>Starving, Famished</td>
</tr>
<tr>
<td>Very angry</td>
<td>Mad, Pissed of, Furious</td>
</tr>
</tbody></table></div>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/05/04/%E5%9F%BA%E4%BA%8EVUE-Firebase%E5%9C%A8%E7%BA%BF%E8%81%8A%E5%A4%A9%E5%AE%A4APP/">基于VUE&amp;Firebase的在线聊天室APP</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-05-04</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-04</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">3.1k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">25分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="前言"   >
          <a href="#前言" class="heading-link"><i class="fas fa-link"></i></a><a href="#前言" class="headerlink" title="前言"></a>前言</h1>
      <p><strong>这一期我们准备做一个基于VUE3.0 Composition API与FireBase的在线聊天室</strong></p>
<p><strong>用户登陆到我们的在线聊天室进行聊天</strong></p>

        <h1 id="前期准备"   >
          <a href="#前期准备" class="heading-link"><i class="fas fa-link"></i></a><a href="#前期准备" class="headerlink" title="前期准备"></a>前期准备</h1>
      <p><strong>命令行中利用vue-cli创建vue3.0项目</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">vue create test </span><br><span class="line"><span class="comment">//test是项目名</span></span><br></pre></td></tr></table></div></figure>

<p><img   src="https://img-blog.csdnimg.cn/20210504093916655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>选择手动添加Manually select features</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504094100562.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>选择上述勾选项</strong></p>
<p><strong>接下来，选择3.x（preview）因为要用到VUE的composition API</strong></p>
<p><strong>选择with node-sass，如下图所示：</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/2021050409425939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>然后一直enter即可，直到出现package.json，如图所示：</strong></p>
<p><strong>选择In package.json</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504094426971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>出现preset选项，选择否 not save</strong></p>
<p><strong>然后经过漫长的等待…</strong></p>
<p><strong>如果一切顺利，那么会出现下图所示：</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504094640180.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Successfully created project test.</span><br><span class="line">Get started <span class="keyword">with</span> the following commands:</span><br><span class="line"></span><br><span class="line">$ cd test</span><br><span class="line">$ npm run serve</span><br></pre></td></tr></table></div></figure>

<p><strong>cd 切换到这个新项目的工作目录。</strong></p>
<p><strong>这个时候我们要安装Firebase数据库用于聊天室中所有消息的存储</strong></p>
<ul>
<li>注意，Firebase由Google创建并持续维护，安装前请科学上网 ✈ ️</li>
</ul>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i firebase</span><br></pre></td></tr></table></div></figure>

<p><strong>目前为止，我们的前期工作就已经做好了！</strong></p>
<p>然后利用VS Code或者IDEA等编译器导入这个VUE项目即可</p>

        <h1 id="配置项目的数据库Firebase"   >
          <a href="#配置项目的数据库Firebase" class="heading-link"><i class="fas fa-link"></i></a><a href="#配置项目的数据库Firebase" class="headerlink" title="配置项目的数据库Firebase"></a>配置项目的数据库Firebase</h1>
      <p><strong>首先，我们需要修改一个配置信息</strong></p>
<p>打开<code>package.json</code> 在”rules”中添加：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;no-unused-vars&quot;</span>: <span class="string">&quot;off&quot;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>因为在做一些初始配置，所以演示的时候，可能会因为定义了未被使用的变量而报错。</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504095902400.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="Src-目录下创建db-js-firebase配置数据库信息"   >
          <a href="#Src-目录下创建db-js-firebase配置数据库信息" class="heading-link"><i class="fas fa-link"></i></a><a href="#Src-目录下创建db-js-firebase配置数据库信息" class="headerlink" title="Src 目录下创建db.js firebase配置数据库信息"></a>Src 目录下创建db.js firebase配置数据库信息</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210504100207129.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>进入db.js</strong></p>
<p>输入以下备用代码：</p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> firebase <span class="keyword">from</span> <span class="string">&quot;firebase/app&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&quot;firebase/database&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> config = &#123;</span><br><span class="line">    <span class="comment">//API KEYS</span></span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> db = firebase.initializeApp(config)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> db;</span><br></pre></td></tr></table></div></figure>

<p><strong>这里注意到，我们的config中还没有配置我们firebase的接口信息（包括你这个应用的KEY、用户KEYS、项目ID等等）</strong></p>
<p><strong>因此，接下来我们要去firebase的官网配置：</strong></p>
<ol>
<li><p>点击右上角的转到控制台</p>
</li>
<li><p>点击添加项目并输入项目名称</p>
</li>
<li><p>取消勾选“为此项目启动 Google Analytics分析”</p>
</li>
<li><p>等待正在创建项目…</p>
</li>
</ol>
<p><img   src="https://img-blog.csdnimg.cn/20210504100443748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504100648267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<ol start="5">
<li>点击对应的项目名，顺利的话，会进入以下画面：</li>
</ol>
<p><img   src="https://img-blog.csdnimg.cn/20210504100842673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<ol start="6">
<li>添加网页端应用，并获取到应用接口信息</li>
</ol>
<p><img   src="https://img-blog.csdnimg.cn/20210504101140579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<ol start="7">
<li>输入我们的应用别名，注册应用后，可以获得Firebase SDK （下图所示）</li>
</ol>
<p><img   src="https://img-blog.csdnimg.cn/20210504101315653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>由于我们已经在项目中 预先安装了firebase 那么就不用最上面的JS引入语句了</strong></p>
<p><strong>JS文件内容如下：</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="comment">// Your web app&#x27;s Firebase configuration</span></span><br><span class="line">  <span class="keyword">var</span> firebaseConfig = &#123;</span><br><span class="line">    <span class="attr">apiKey</span>: <span class="string">&quot;AIzaSyAgKkSD7cherkQylfbmrr_cCb6awLk9ynk&quot;</span>,</span><br><span class="line">    <span class="attr">authDomain</span>: <span class="string">&quot;test-dc7e4.firebaseapp.com&quot;</span>,</span><br><span class="line">    <span class="attr">projectId</span>: <span class="string">&quot;test-dc7e4&quot;</span>,</span><br><span class="line">    <span class="attr">storageBucket</span>: <span class="string">&quot;test-dc7e4.appspot.com&quot;</span>,</span><br><span class="line">    <span class="attr">messagingSenderId</span>: <span class="string">&quot;594878054873&quot;</span>,</span><br><span class="line">    <span class="attr">appId</span>: <span class="string">&quot;1:594878054873:web:9d533554407419fe7259c8&quot;</span></span><br><span class="line">  &#125;;</span><br><span class="line">  <span class="comment">// Initialize Firebase</span></span><br><span class="line">  firebase.initializeApp(firebaseConfig);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></div></figure>

<p><strong>我们需要将firebaseConfig中的内容粘贴到，我们的db.js中去：</strong></p>
<p><strong>我的配置信息如下图所示：</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504101612983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<ol start="8">
<li>配置实时数据库 RealTime Database </li>
</ol>
<p><strong>这一步，是为了查看聊天室中的实时存储的消息。</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504200221560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p>导航栏左侧的Realtime Database实时数据库 一步步创建即可</p>
<ul>
<li>记得数据库位置需要选择美国 US 🇺🇸</li>
</ul>
<p><strong>那么，到目前为止，数据库配置信息完成了。</strong></p>

        <h1 id="进入项目"   >
          <a href="#进入项目" class="heading-link"><i class="fas fa-link"></i></a><a href="#进入项目" class="headerlink" title="进入项目"></a>进入项目</h1>
      
        <h2 id="页面的样式添加"   >
          <a href="#页面的样式添加" class="heading-link"><i class="fas fa-link"></i></a><a href="#页面的样式添加" class="headerlink" title="页面的样式添加"></a>页面的样式添加</h2>
      <p><strong>进入初始话的文件，我们将没用的初始文件都删掉：component以及assets中的内容</strong></p>
<p>进入APP.vue中，写好初始页面：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">	<span class="keyword">export</span> <span class="keyword">default</span>&#123;</span></span><br><span class="line"><span class="javascript">		<span class="function"><span class="title">setup</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">			</span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span>&#123;</span></span><br><span class="line"><span class="javascript">				</span></span><br><span class="line"><span class="javascript">			&#125;</span></span><br><span class="line"><span class="javascript">		&#125;</span></span><br><span class="line"><span class="javascript">	&#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;scss&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>我们可以发现，与VUE2.0不同的是，我们使用setup来配置初始化信息，并且在初始化之后，return这些信息，让前端页面任何地方可以引用这些数据（比如用于v-model)。</strong></p>
<p>接下来，将以下样式贴到style中：</p>
<figure class="highlight css"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">	<span class="attribute">font-family</span>: Avenir, Helvetica, Arial, sans-serif;</span><br><span class="line">	-webkit-<span class="attribute">font-smoothing</span>: antialiased;</span><br><span class="line">	-moz-osx-<span class="attribute">font-smoothing</span>: grayscale;</span><br><span class="line">	<span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">	<span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.view</span> &#123;</span><br><span class="line">	<span class="attribute">display</span>: flex;</span><br><span class="line">	<span class="attribute">justify-content</span>: center;</span><br><span class="line">	<span class="attribute">min-height</span>: <span class="number">100vh</span>;</span><br><span class="line">	<span class="attribute">background-color</span>: <span class="number">#ea526f</span>;</span><br><span class="line">	</span><br><span class="line">	&amp;<span class="selector-class">.login</span> &#123;</span><br><span class="line">		<span class="attribute">align-items</span>: center;</span><br><span class="line">		<span class="selector-class">.login-form</span> &#123;</span><br><span class="line">			<span class="attribute">display</span>: block;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">			<span class="attribute">padding</span>: <span class="number">15px</span>;</span><br><span class="line">			</span><br><span class="line">			<span class="selector-class">.form-inner</span> &#123;</span><br><span class="line">				<span class="attribute">display</span>: block;</span><br><span class="line">				<span class="attribute">background-color</span>: <span class="number">#FFF</span>;</span><br><span class="line">				<span class="attribute">padding</span>: <span class="number">50px</span> <span class="number">15px</span>;</span><br><span class="line">				<span class="attribute">border-radius</span>: <span class="number">16px</span>;</span><br><span class="line">				<span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">6px</span> <span class="number">12px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">				<span class="selector-tag">h1</span> &#123;</span><br><span class="line">					<span class="attribute">color</span>: <span class="number">#AAA</span>;</span><br><span class="line">					<span class="attribute">font-size</span>: <span class="number">28px</span>;</span><br><span class="line">					<span class="attribute">margin-bottom</span>: <span class="number">30px</span>;</span><br><span class="line">				&#125;</span><br><span class="line">				<span class="selector-tag">label</span> &#123;</span><br><span class="line">					<span class="attribute">display</span>: block;</span><br><span class="line">					<span class="attribute">margin-bottom</span>: <span class="number">5px</span>;</span><br><span class="line">					<span class="attribute">color</span>: <span class="number">#AAA</span>;</span><br><span class="line">					<span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">					<span class="attribute">transition</span>: <span class="number">0.4s</span>;</span><br><span class="line">				&#125;</span><br><span class="line">				<span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;text&quot;</span>]</span> &#123;</span><br><span class="line">					appearance: none;</span><br><span class="line">					<span class="attribute">border</span>: none;</span><br><span class="line">					<span class="attribute">outline</span>: none;</span><br><span class="line">					<span class="attribute">background</span>: none;</span><br><span class="line">					<span class="attribute">display</span>: block;</span><br><span class="line">					<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">					<span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">15px</span>;</span><br><span class="line">					<span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">					<span class="attribute">margin-bottom</span>: <span class="number">15px</span>;</span><br><span class="line">					</span><br><span class="line">					<span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">					<span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">					<span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">					<span class="attribute">background-color</span>: <span class="number">#F3F3F3</span>;</span><br><span class="line">					<span class="attribute">transition</span>: <span class="number">0.4s</span>;</span><br><span class="line">					&amp;<span class="selector-pseudo">::placeholder</span> &#123;</span><br><span class="line">						<span class="attribute">color</span>: <span class="number">#888</span>;</span><br><span class="line">						<span class="attribute">transition</span>: <span class="number">0.4s</span>;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				<span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;submit&quot;</span>]</span> &#123;</span><br><span class="line">					appearance: none;</span><br><span class="line">					<span class="attribute">border</span>: none;</span><br><span class="line">					<span class="attribute">outline</span>: none;</span><br><span class="line">					<span class="attribute">background</span>: none;</span><br><span class="line">					<span class="attribute">display</span>: block;</span><br><span class="line">					<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">					<span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">15px</span>;</span><br><span class="line">					<span class="attribute">background-color</span>: <span class="number">#ea526f</span>;</span><br><span class="line">					<span class="attribute">border-radius</span>: <span class="number">8px</span>;</span><br><span class="line">					<span class="attribute">color</span>: <span class="number">#FFF</span>;</span><br><span class="line">					<span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">					<span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">				&#125;</span><br><span class="line">				&amp;<span class="selector-pseudo">:focus</span>-within &#123;</span><br><span class="line">					<span class="selector-tag">label</span> &#123;</span><br><span class="line">						<span class="attribute">color</span>: <span class="number">#ea526f</span>;</span><br><span class="line">					&#125;</span><br><span class="line">					<span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;text&quot;</span>]</span> &#123;</span><br><span class="line">						<span class="attribute">background-color</span>: <span class="number">#FFF</span>;</span><br><span class="line">						<span class="attribute">box-shadow</span>: <span class="number">0</span> <span class="number">0</span> <span class="number">6px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0.2</span>);</span><br><span class="line">						&amp;<span class="selector-pseudo">::placeholder</span> &#123;</span><br><span class="line">							<span class="attribute">color</span>: <span class="number">#666</span>;</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">	&amp;<span class="selector-class">.chat</span> &#123;</span><br><span class="line">		<span class="attribute">flex-direction</span>: column;</span><br><span class="line">		<span class="selector-tag">header</span> &#123;</span><br><span class="line">			<span class="attribute">position</span>: relative;</span><br><span class="line">			<span class="attribute">display</span>: block;</span><br><span class="line">			<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">			<span class="attribute">padding</span>: <span class="number">50px</span> <span class="number">30px</span> <span class="number">10px</span>;</span><br><span class="line">			<span class="selector-class">.logout</span> &#123;</span><br><span class="line">				<span class="attribute">position</span>: absolute;</span><br><span class="line">				<span class="attribute">top</span>: <span class="number">15px</span>;</span><br><span class="line">				<span class="attribute">right</span>: <span class="number">15px</span>;</span><br><span class="line">				appearance: none;</span><br><span class="line">				<span class="attribute">border</span>: none;</span><br><span class="line">				<span class="attribute">outline</span>: none;</span><br><span class="line">				<span class="attribute">background</span>: none;</span><br><span class="line">				</span><br><span class="line">				<span class="attribute">color</span>: <span class="number">#FFF</span>;</span><br><span class="line">				<span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">				<span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</span><br><span class="line">				<span class="attribute">text-align</span>: right;</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="selector-tag">h1</span> &#123;</span><br><span class="line">				<span class="attribute">color</span>: <span class="number">#FFF</span>;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-class">.chat-box</span> &#123;</span><br><span class="line">			<span class="attribute">border-radius</span>: <span class="number">24px</span> <span class="number">24px</span> <span class="number">0px</span> <span class="number">0px</span>;</span><br><span class="line">			<span class="attribute">background-color</span>: <span class="number">#FFF</span>;</span><br><span class="line">			<span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">12px</span> <span class="built_in">rgba</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">100</span>, <span class="number">0.2</span>);</span><br><span class="line">			<span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="number">100%</span>;</span><br><span class="line">			<span class="attribute">padding</span>: <span class="number">30px</span>;</span><br><span class="line">			<span class="selector-class">.message</span> &#123;</span><br><span class="line">				<span class="attribute">display</span>: flex;</span><br><span class="line">				<span class="attribute">margin-bottom</span>: <span class="number">15px</span>;</span><br><span class="line">				</span><br><span class="line">				<span class="selector-class">.message-inner</span> &#123;</span><br><span class="line">					<span class="selector-class">.username</span> &#123;</span><br><span class="line">						<span class="attribute">color</span>: <span class="number">#888</span>;</span><br><span class="line">						<span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">						<span class="attribute">margin-bottom</span>: <span class="number">5px</span>;</span><br><span class="line">						<span class="attribute">padding-left</span>: <span class="number">15px</span>;</span><br><span class="line">						<span class="attribute">padding-right</span>: <span class="number">15px</span>;</span><br><span class="line">					&#125;</span><br><span class="line">					<span class="selector-class">.content</span> &#123;</span><br><span class="line">						<span class="attribute">display</span>: inline-block;</span><br><span class="line">						<span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">20px</span>;</span><br><span class="line">						<span class="attribute">background-color</span>: <span class="number">#F3F3F3</span>;</span><br><span class="line">						<span class="attribute">border-radius</span>: <span class="number">999px</span>;</span><br><span class="line">						<span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">						<span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">						<span class="attribute">line-height</span>: <span class="number">1.2em</span>;</span><br><span class="line">						<span class="attribute">text-align</span>: left;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				&amp;<span class="selector-class">.current-user</span> &#123;</span><br><span class="line">					<span class="attribute">margin-top</span>: <span class="number">30px</span>;</span><br><span class="line">					<span class="attribute">justify-content</span>: flex-end;</span><br><span class="line">					<span class="attribute">text-align</span>: right;</span><br><span class="line">					<span class="selector-class">.message-inner</span> &#123;</span><br><span class="line">						<span class="attribute">max-width</span>: <span class="number">75%</span>;</span><br><span class="line">						<span class="selector-class">.content</span> &#123;</span><br><span class="line">							<span class="attribute">color</span>: <span class="number">#FFF</span>;</span><br><span class="line">							<span class="attribute">font-weight</span>: <span class="number">600</span>;</span><br><span class="line">							<span class="attribute">background-color</span>: <span class="number">#ea526f</span>;</span><br><span class="line">						&#125;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="selector-tag">footer</span> &#123;</span><br><span class="line">			<span class="attribute">position</span>: sticky;</span><br><span class="line">			<span class="attribute">bottom</span>: <span class="number">0px</span>;</span><br><span class="line">			<span class="attribute">background-color</span>: <span class="number">#FFF</span>;</span><br><span class="line">			<span class="attribute">padding</span>: <span class="number">30px</span>;</span><br><span class="line">			<span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">12px</span> <span class="built_in">rgba</span>(<span class="number">100</span>, <span class="number">100</span>, <span class="number">100</span>, <span class="number">0.2</span>);</span><br><span class="line">			<span class="selector-tag">form</span> &#123;</span><br><span class="line">				<span class="attribute">display</span>: flex;</span><br><span class="line">				<span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;text&quot;</span>]</span> &#123;</span><br><span class="line">					<span class="attribute">flex</span>: <span class="number">1</span> <span class="number">1</span> <span class="number">100%</span>;</span><br><span class="line">					appearance: none;</span><br><span class="line">					<span class="attribute">border</span>: none;</span><br><span class="line">					<span class="attribute">outline</span>: none;</span><br><span class="line">					<span class="attribute">background</span>: none;</span><br><span class="line">					<span class="attribute">display</span>: block;</span><br><span class="line">					<span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">					<span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">15px</span>;</span><br><span class="line">					<span class="attribute">border-radius</span>: <span class="number">8px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="number">8px</span>;</span><br><span class="line">					</span><br><span class="line">					<span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line">					<span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">					<span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(<span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line">					<span class="attribute">background-color</span>: <span class="number">#F3F3F3</span>;</span><br><span class="line">					<span class="attribute">transition</span>: <span class="number">0.4s</span>;</span><br><span class="line">					&amp;<span class="selector-pseudo">::placeholder</span> &#123;</span><br><span class="line">						<span class="attribute">color</span>: <span class="number">#888</span>;</span><br><span class="line">						<span class="attribute">transition</span>: <span class="number">0.4s</span>;</span><br><span class="line">					&#125;</span><br><span class="line">				&#125;</span><br><span class="line">				</span><br><span class="line">				<span class="selector-tag">input</span><span class="selector-attr">[type=<span class="string">&quot;submit&quot;</span>]</span> &#123;</span><br><span class="line">					appearance: none;</span><br><span class="line">					<span class="attribute">border</span>: none;</span><br><span class="line">					<span class="attribute">outline</span>: none;</span><br><span class="line">					<span class="attribute">background</span>: none;</span><br><span class="line">					<span class="attribute">display</span>: block;</span><br><span class="line">					<span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">15px</span>;</span><br><span class="line">					<span class="attribute">border-radius</span>: <span class="number">0px</span> <span class="number">8px</span> <span class="number">8px</span> <span class="number">0px</span>;</span><br><span class="line">					<span class="attribute">background-color</span>: <span class="number">#ea526f</span>;</span><br><span class="line">					<span class="attribute">color</span>: <span class="number">#FFF</span>;</span><br><span class="line">					<span class="attribute">font-size</span>: <span class="number">18px</span>;</span><br><span class="line">					<span class="attribute">font-weight</span>: <span class="number">700</span>;</span><br><span class="line">				&#125;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h2 id="登陆模块"   >
          <a href="#登陆模块" class="heading-link"><i class="fas fa-link"></i></a><a href="#登陆模块" class="headerlink" title="登陆模块"></a>登陆模块</h2>
      <ul>
<li><p>定义默认提交进入的方法 @submit.prevent=”Login” 绑定事件</p>
</li>
<li><p>定义登陆时，输入框中输入的信息所绑定的变量(导入vue的ref) const inputUsername = ref(“”);</p>
</li>
<li><p>登录时，将输入框中的值对应的信息保存数据库中，否则下次登陆系统后，以前的信息（包括用户名与消息）都不会保存起来(导入vue的reactive响应变动)</p>
</li>
</ul>
<ol>
<li>JS中的setup中配置相应的变量与方法（记得返回这些数据让页面显示可以使用）</li>
</ol>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; reactive, onMounted, ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> db <span class="keyword">from</span> <span class="string">&#x27;./db&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">	setup () &#123;</span><br><span class="line">		<span class="comment">//定义输入框输入绑定的变量 以及 保存用户信息的state变量</span></span><br><span class="line">		<span class="keyword">const</span> inputUsername = ref(<span class="string">&quot;&quot;</span>); <span class="comment">//初始化为空 相当于vue2.0的 inputUsername: &#x27;&#x27;</span></span><br><span class="line">		<span class="keyword">const</span> state = reactive(&#123; <span class="comment">//用户发的信息 后面会用到</span></span><br><span class="line">			<span class="attr">username</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">			<span class="attr">messages</span>: [] </span><br><span class="line">		&#125;);</span><br><span class="line">		</span><br><span class="line">		<span class="comment">//定义表单提交绑定的方法</span></span><br><span class="line">		<span class="keyword">const</span> Login = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">			<span class="comment">//与vue2.0不同的是 我们不再用this.val</span></span><br><span class="line">			<span class="comment">//检测到用户输入信息 就存储用户登陆信息</span></span><br><span class="line">			<span class="keyword">if</span>(inputUsername.value != <span class="string">&quot;&quot;</span> || inputUsername.value != <span class="literal">null</span>)&#123;</span><br><span class="line">				state.username = inputUsername.value;</span><br><span class="line">				inputUsername.value = <span class="string">&quot;&quot;</span>;</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;</span><br><span class="line">		</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			inputUsername,</span><br><span class="line">			Login,</span><br><span class="line">			state</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>
<ol start="2">
<li>页面显示</li>
</ol>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;view login&quot;</span> <span class="attr">v-if</span>=<span class="string">&quot;state.username === &#x27;&#x27; || state.username === null&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">form</span> <span class="attr">class</span>=<span class="string">&quot;login-form&quot;</span> @<span class="attr">submit.prevent</span>=<span class="string">&quot;Login&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;form-inner&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Login to FireChat<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">&quot;username&quot;</span>&gt;</span>Username<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">v-model</span>=<span class="string">&quot;inputUsername&quot;</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">placeholder</span>=<span class="string">&quot;Please enter your username...&quot;</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> </span></span><br><span class="line"><span class="tag">          <span class="attr">value</span>=<span class="string">&quot;Login&quot;</span> /&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  </span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;view chat&quot;</span> <span class="attr">v-else</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">h1</span>&gt;</span> 这是聊天室显示区域 <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  </span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>用户界面效果图，如下图所示：</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504194806246.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>可以看到，我们使用了v-if进行判断</strong></p>
<p><strong>如果存储在state中的用户名信息不为空（即表示用户填入了信息想进入聊天室）</strong></p>
<p><strong>则显示这是聊天室显示区域 否则会显示登陆区域让用户进行登陆(由于是在线聊天室，不设置密码)</strong></p>
<ol start="3">
<li>从聊天室中注销出来</li>
</ol>
<p><strong>刚才我们模拟进入了聊天室，现在我们添加注销功能</strong></p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;view chat&quot;</span> <span class="attr">v-else</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;logout&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;Logout&quot;</span>&gt;</span>Logout<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Welcome, &#123;&#123; state.username &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>前端页面写好了，补充JS中的Logout方法，还是写在setup中</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Logout = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">	state.username = <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//别忘了return 让前端页面调用</span></span><br><span class="line"><span class="keyword">return</span>&#123;</span><br><span class="line">	...Login,</span><br><span class="line">	state,</span><br><span class="line">	Logout </span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p><strong>前面提到了，当state中的username为空或者为null时，会显示登陆区域。</strong></p>
<ol start="4">
<li>为聊天室添加（发送消息，查看消息功能）</li>
</ol>
<p><strong>这是最后一个步骤了，也是需要用到firebase（特别是我们刚才配置的实时数据库）的一步</strong></p>
<p>首先在刚才注销区域<code>&lt;header&gt;</code>标签 的下方，加入代码：</p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span> <span class="attr">class</span>=<span class="string">&quot;chat-box&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> </span></span><br><span class="line"><span class="tag">	<span class="attr">v-for</span>=<span class="string">&quot;message in state.messages&quot;</span> </span></span><br><span class="line"><span class="tag">	<span class="attr">:key</span>=<span class="string">&quot;message.key&quot;</span> </span></span><br><span class="line"><span class="tag">	<span class="attr">:class</span>=<span class="string">&quot;(message.username == state.username ? &#x27;message current-user&#x27; : &#x27;message&#x27;)&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;message-inner&quot;</span>&gt;</span></span><br><span class="line">	  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;username&quot;</span>&gt;</span>&#123;&#123; message.username &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span>&#123;&#123; message.content &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">form</span> @<span class="attr">submit.prevent</span>=<span class="string">&quot;SendMessage&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> </span></span><br><span class="line"><span class="tag">	  <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> </span></span><br><span class="line"><span class="tag">	  <span class="attr">v-model</span>=<span class="string">&quot;inputMessage&quot;</span> </span></span><br><span class="line"><span class="tag">	  <span class="attr">placeholder</span>=<span class="string">&quot;Write a message...&quot;</span> /&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">input</span> </span></span><br><span class="line"><span class="tag">	  <span class="attr">type</span>=<span class="string">&quot;submit&quot;</span> </span></span><br><span class="line"><span class="tag">	  <span class="attr">value</span>=<span class="string">&quot;Send&quot;</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><em>可以看到，我们用到了SendMessage方法用来发送数据</em></p>
<ul>
<li><p>用到了state中的messages并且将当前用户的前端样式区别于其他用户</p>
</li>
<li><p>并且从messages中取出所有消息 利用v-for在前端中显示</p>
</li>
<li><p>输入的消息绑定v-model inputMessage</p>
</li>
</ul>
<p><mark>那么，下面就可以定义消息变量以及相应发送消息的函数！</mark></p>
<p><strong>还是写在setup中 并注意return给前端使用</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//const inputUsername = ref(&quot;&quot;);</span></span><br><span class="line"><span class="keyword">const</span> inputMessage = ref(<span class="string">&quot;&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> SendMessage = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">	<span class="keyword">const</span> messagesRef = db.database().ref(<span class="string">&quot;messages&quot;</span>); <span class="comment">//firebase数据库</span></span><br><span class="line">	<span class="keyword">if</span>(inputMessage.value === <span class="string">&quot;&quot;</span> || inputMessage.value === value)&#123; <span class="comment">//用户不能发送空消息</span></span><br><span class="line">		<span class="keyword">return</span>;</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="keyword">const</span> message = &#123; <span class="comment">//准备将发送的消息存储至数据库中</span></span><br><span class="line">		<span class="attr">username</span>: stae.username,</span><br><span class="line">		<span class="attr">content</span>: inputMessage.value</span><br><span class="line">	&#125;</span><br><span class="line">	messageRef.push(message); <span class="comment">//相当于MySQL中的insert firebase是基于JSON的 故用push</span></span><br><span class="line">	inputMessage.value = <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p><strong>那么，到目前位置，我们写入数据库的操作就写完了。</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504201725607.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<ul>
<li><p>但是现在是无法实时看到，任何用户发送的消息的，为什么？</p>
</li>
<li><p>因为，我们虽然存储到了firebase数据库中去，但是我们每次v-for取出的数据，是从state中取出的</p>
</li>
</ul>
<p><strong>因此，下一步我们需要，在进入聊天室时，将数据库中的数据赋给state</strong></p>
<ol start="5">
<li>firebase检索数据(写在onMounted钩子函数中)</li>
</ol>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">onMounted(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> messagesRef = db.database().ref(<span class="string">&quot;messages&quot;</span>); <span class="comment">//选择数据库</span></span><br><span class="line">  messagesRef.on(<span class="string">&#x27;value&#x27;</span>, <span class="function"><span class="params">snapshot</span> =&gt;</span> &#123; <span class="comment">//on 用于firebase数据库检索数据</span></span><br><span class="line">	<span class="keyword">const</span> data = snapshot.val();</span><br><span class="line">	<span class="keyword">let</span> messages = [];</span><br><span class="line">	<span class="built_in">Object</span>.keys(data).forEach(<span class="function"><span class="params">key</span> =&gt;</span> &#123;</span><br><span class="line">	  messages.push(&#123;</span><br><span class="line">		<span class="attr">id</span>: key,</span><br><span class="line">		<span class="attr">username</span>: data[key].username,</span><br><span class="line">		<span class="attr">content</span>: data[key].content</span><br><span class="line">	  &#125;);</span><br><span class="line">	&#125;);</span><br><span class="line">	state.messages = messages;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></div></figure>

<p><strong>其中，data是我们从数据库中查询到的所有数据。</strong></p>
<p><strong>如果我们试着打印以下内容，你会发现：</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210504202829214.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><em>因为，Firebase中存储的信息都是JSON对象，那么，我们就要用相应的方法来遍历每个对象，并将所有对象存储在messages中</em></p>
<p><strong>最后将messages的内容，赋给我们的state 好让我们的v-for循环遍历数据可以生效！</strong></p>
<p><strong>并且值得注意的是，每次有新的内容添加至数据库时（即每次发送消息时）</strong></p>
<ul>
<li>这个messagesRef.on(‘value’, …) 都会被调用一次，我们可以看成是事件监听（每当有新的数据时，会被调用！)</li>
</ul>

        <h1 id="文末总结"   >
          <a href="#文末总结" class="heading-link"><i class="fas fa-link"></i></a><a href="#文末总结" class="headerlink" title="文末总结"></a>文末总结</h1>
      <p>P.S. 该文所有的代码以及教程均来自YT博主（非自己原创）只不过自己以文字思路的形式写成笔记而已</p>
<ol>
<li><p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://github.com/TylerPottsDev/FireChat-Vue" >点我查看源码地址</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</li>
<li><p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=72Fk9i9HcZM&t=197s" >点我查看视频教学</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</li>
</ol>
<p><strong>如果哪里有写的不对的地方，多多包涵，请于文章下方的评论区告知，谢谢！</strong></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/27/VUE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0-%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95%E5%8F%8A%E7%9B%B8%E5%BA%94%E5%BA%94%E7%94%A8-2/">VUE学习笔记-基础语法及其应用-2-深入组件开发</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-27</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-12</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">4.3k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">31分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->

<p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://www.jspang.com/detailed?id=69" >（转）本文笔记&amp;源码地址_JS胖</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>

        <h1 id="了解组件，什么是组件概念？"   >
          <a href="#了解组件，什么是组件概念？" class="heading-link"><i class="fas fa-link"></i></a><a href="#了解组件，什么是组件概念？" class="headerlink" title="了解组件，什么是组件概念？"></a>了解组件，什么是组件概念？</h1>
      <p><img   src="https://img-blog.csdnimg.cn/20210427202040534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p>从图中我们可以看到，总共的<strong>大区域分为了三个板块</strong></p>
<p><strong>上面一个Header，下面左边一个LeftSide以及右边的RightSide</strong></p>
<p>根据每个区域，又可以分为两个（最下层的绿色中间）、以及三个（最下层的绿色右边）</p>

        <h2 id="组件定义："   >
          <a href="#组件定义：" class="heading-link"><i class="fas fa-link"></i></a><a href="#组件定义：" class="headerlink" title="组件定义："></a>组件定义：</h2>
      <p><strong>所谓组件，我们就可以看成是：一个页面中的某一个Section，通过不同的组件共同拼凑</strong></p>
<p>从而，形成一个完整的组件，这也是目前前端最流行的开发方式：</p>
<p><strong>vue_component.html</strong></p>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;UTF-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">&quot;viewport&quot;</span> <span class="attr">content</span>=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;https://unpkg.com/vue@next&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> app=Vue.createApp(&#123; &#125;)</span></span><br><span class="line"><span class="javascript">    <span class="keyword">const</span> vm=app.mount(<span class="string">&quot;#app&quot;</span>)</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<p><strong>我们可以看到，现在我们将一个新的VUE实例挂载到页面ID为app的区域</strong></p>

        <h1 id="定义全局组件并使用"   >
          <a href="#定义全局组件并使用" class="heading-link"><i class="fas fa-link"></i></a><a href="#定义全局组件并使用" class="headerlink" title="定义全局组件并使用"></a>定义全局组件并使用</h1>
      <p>现在我们的app可以注册全局的组件，注册好后可以直接在根组件上进行使用</p>
<p><strong>比如我们要显示两个信息（紧接着上方的基本代码）</strong></p>
<ol>
<li><p>这是我的网站</p>
</li>
<li><p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://www.vincent990413.gitee.io/myblog" >https://www.vincent990413.gitee.io/myblog</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//第一个全局组件</span></span><br><span class="line">app.component(<span class="string">&#x27;my-component-describe&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">template</span>:<span class="string">` &lt;h1&gt; 这是我的网站 &lt;/h1&gt; `</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//第二个全局组件</span></span><br><span class="line">app.component(<span class="string">&#x27;my-component-website&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">template</span>:<span class="string">` &lt;h1&gt; https://www.vincent990413.gitee.io/myblog &lt;/h1&gt;`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></div></figure></li>
</ol>
<p><strong>以上就完成了对组件的定义，接下来我们要做的就是使用这些组件</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//在创建实例的同时 使用自己的组件</span></span><br><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;my-component-describe /&gt;</span></span><br><span class="line"><span class="string">		&lt;my-component-website /&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></div></figure>

<p><strong>可以将这些步骤想象成 “初始化数据” 初始化数据之后 -&gt; 最后一步才是挂载在网页中</strong></p>

        <h2 id="全局组件的可复用性"   >
          <a href="#全局组件的可复用性" class="heading-link"><i class="fas fa-link"></i></a><a href="#全局组件的可复用性" class="headerlink" title="全局组件的可复用性"></a>全局组件的可复用性</h2>
      <p><strong>什么叫可复用性，就是可重用性，我们将一个组件封装好之后，</strong></p>
<p><strong>可以在网页中的各个区域去重复引用这个组件</strong></p>

        <h2 id="全局组件的弊端？！"   >
          <a href="#全局组件的弊端？！" class="heading-link"><i class="fas fa-link"></i></a><a href="#全局组件的弊端？！" class="headerlink" title="全局组件的弊端？！"></a>全局组件的弊端？！</h2>
      <p><strong>全局组件是有弊端的，因为你处处都可以使用，但是性能不高，应用打开就开始复杂的初始化</strong></p>

        <h1 id="局部组件"   >
          <a href="#局部组件" class="heading-link"><i class="fas fa-link"></i></a><a href="#局部组件" class="headerlink" title="局部组件"></a>局部组件</h1>
      <p><strong>针对与局部组件：我现在不注册，我要用的时候才注册这个组件，才进行使用</strong></p>
<p><strong>而全局组件是，我不用之前一直都被注册了，一直都存在在那里！</strong></p>
<p><mark>我们可以把局部组件，想象成，一个变量！我定义这个变量，我用的时候再注册它。</mark></p>

        <h2 id="创建局部组件"   >
          <a href="#创建局部组件" class="heading-link"><i class="fas fa-link"></i></a><a href="#创建局部组件" class="headerlink" title="创建局部组件"></a>创建局部组件</h2>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> myComponentCounter = &#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">count</span>: <span class="number">0</span>  </span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">` &lt;div&gt; &#123;&#123;count&#125;&#125; &lt;button @click=&quot; count++ &quot;&gt;增加1&lt;/button&gt; &lt;/div&gt; `</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>

<p><strong>通过这种定义“变量”的方式，我们就已经定义好一个组件了，接下来我们需要在vue.CreateApp()方法里去注册</strong></p>
<p><strong>直接用component: { myComponentCounter }, 声明即可</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.CreateApp(&#123;</span><br><span class="line">	<span class="attr">components</span>: &#123;<span class="string">&#x27;my-component-counter&#x27;</span>:myComponentCounter&#125;, <span class="comment">//声明我的组件 前面的别名可以去掉</span></span><br><span class="line">	<span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt;这是我的网站&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		&lt;my-component-counter/&gt; </span></span><br><span class="line"><span class="string">	`</span>	<span class="comment">//在父组件中的任何位置 都可以调用已经注册了的组件</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></div></figure>

<p><strong>我们的局部组件一般使用驼峰命名法</strong></p>
<p><strong>但多个单词，我们应该遵守规范，</strong></p>
<p><strong>1. const变量用驼峰myComponentCounter</strong></p>
<p><strong>2. 起别名时 单引号且中间加- 小写每个字母: my-component-counter</strong></p>
<p>(具体见上方代码)</p>

        <h1 id="父组件与子组件以及他们之间的静态、动态传值"   >
          <a href="#父组件与子组件以及他们之间的静态、动态传值" class="heading-link"><i class="fas fa-link"></i></a><a href="#父组件与子组件以及他们之间的静态、动态传值" class="headerlink" title="父组件与子组件以及他们之间的静态、动态传值"></a>父组件与子组件以及他们之间的静态、动态传值</h1>
      
        <h2 id="什么是父组件，什么是子组件？"   >
          <a href="#什么是父组件，什么是子组件？" class="heading-link"><i class="fas fa-link"></i></a><a href="#什么是父组件，什么是子组件？" class="headerlink" title="什么是父组件，什么是子组件？"></a>什么是父组件，什么是子组件？</h2>
      <p><mark>我们在父组件中，定义子组件并使用子组件</mark></p>
<p><strong>被注册，被使用的那个组件叫做：子组件</strong></p>
<p><strong>使用 “定义好的组件” 的组件叫做父组件</strong></p>

        <h2 id="定义全局组件Son-并在父组件中使用"   >
          <a href="#定义全局组件Son-并在父组件中使用" class="heading-link"><i class="fas fa-link"></i></a><a href="#定义全局组件Son-并在父组件中使用" class="headerlink" title="定义全局组件Son 并在父组件中使用"></a>定义全局组件Son 并在父组件中使用</h2>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt; 这是子组件 Son div &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> app = Vue.CreateApp(&#123;</span><br><span class="line">	<span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt;下面调用子组件&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		&lt;Son /&gt; </span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">	<span class="comment">// 调用Son 子组件</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm=app.mount(<span class="string">&quot;#app&quot;</span>)</span><br></pre></td></tr></table></div></figure>


        <h2 id="父组件的参数传给子组件（静态传值）"   >
          <a href="#父组件的参数传给子组件（静态传值）" class="heading-link"><i class="fas fa-link"></i></a><a href="#父组件的参数传给子组件（静态传值）" class="headerlink" title="父组件的参数传给子组件（静态传值）"></a>父组件的参数传给子组件（静态传值）</h2>
      <p><strong>所谓父组件向子组件传值，就是在调用子组件的时候，静态绑定props参数</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件传入name参数 那么子组件就要有一个name处于prop数组中</span></span><br><span class="line">&lt;Son name = <span class="string">&quot;vincent&quot;</span>/&gt;</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">prop</span>:[<span class="string">&#x27;name&#x27;</span>]</span><br><span class="line">	<span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt; 这是子组件，父组件传过来的参数name值为：&#123;&#123;name&#125;&#125; &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></div></figure>

<p><strong>这种方法是静态传输，一旦运行起来，就无法改变了</strong></p>

        <h2 id="父组件的参数传给子组件（动态传值）"   >
          <a href="#父组件的参数传给子组件（动态传值）" class="heading-link"><i class="fas fa-link"></i></a><a href="#父组件的参数传给子组件（动态传值）" class="headerlink" title="父组件的参数传给子组件（动态传值）"></a>父组件的参数传给子组件（动态传值）</h2>
      <p><strong>一般我们利用：将父组件中data中的参数与传入子组件的参数进行绑定</strong></p>
<p><strong>从而使得传入的值，是动态的，是可变的</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.CreateApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">name</span>: <span class="string">&#x27;Beatrix&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt;下面调用子组件&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		&lt;Son :name=&quot;name&quot; /&gt;  </span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">	<span class="comment">// 此时是动态传入给子组件的参数 </span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">prop</span>:[<span class="string">&#x27;name&#x27;</span>]</span><br><span class="line">	<span class="attr">template</span>: <span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt; 这是子组件，父组件传过来的参数name值为：&#123;&#123;name&#125;&#125; &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></div></figure>

<p><strong>这样通过修改data中的参数 完成动态绑定</strong></p>

        <h2 id="父组件的参数传给子组件（传入函数参数）"   >
          <a href="#父组件的参数传给子组件（传入函数参数）" class="heading-link"><i class="fas fa-link"></i></a><a href="#父组件的参数传给子组件（传入函数参数）" class="headerlink" title="父组件的参数传给子组件（传入函数参数）"></a>父组件的参数传给子组件（传入函数参数）</h2>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line"><span class="keyword">const</span> app=Vue.createApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">name</span>: <span class="string">&#x27;Beatrix&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">methods</span>:&#123;</span><br><span class="line">		<span class="function"><span class="title">talk</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="keyword">return</span> <span class="string">&quot;你好，我是Vincent.&quot;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt;下面调用子组件并传入函数参数talk&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		&lt;Son :talk = &quot;talk&quot; /&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//子组件</span></span><br><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>, &#123;</span><br><span class="line">	<span class="attr">props</span>:[<span class="string">&#x27;talk&#x27;</span>],</span><br><span class="line">	<span class="attr">methods</span>:&#123;</span><br><span class="line">		<span class="function"><span class="title">buttonTalk</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">//弹窗显示 父组件传来的函数参数</span></span><br><span class="line">			alert(<span class="built_in">this</span>.talk())</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt; 这是子组件Beatrix，我想知道你是谁？&lt;/div&gt;</span></span><br><span class="line"><span class="string">		&lt;div&gt; &lt;button @click=&quot;buttonTalk&quot;&gt;点我就知道了&lt;/button&gt; &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm=app.mount(<span class="string">&quot;#app&quot;</span>)</span><br></pre></td></tr></table></div></figure>

        <h2 id="父组件的参数传给子组件（Slot插槽）"   >
          <a href="#父组件的参数传给子组件（Slot插槽）" class="heading-link"><i class="fas fa-link"></i></a><a href="#父组件的参数传给子组件（Slot插槽）" class="headerlink" title="父组件的参数传给子组件（Slot插槽）"></a>父组件的参数传给子组件（Slot插槽）</h2>
      <p><strong>这种情况适用于，父组件传入给子组件一段HTML代码，欲在部分区域显示：</strong></p>
<ol>
<li><p>在子组件想要显示的区域，声明插槽</p>
</li>
<li><p>在父组件使用子组件的双标签形式，并插入HTML代码/其他子组件 <code>&lt;Son&gt; &lt;div&gt; &#123;&#123;counter&#125;&#125;: &lt;my-component-others /&gt;&lt;/div&gt; &lt;/Son&gt;</code> </p>
</li>
</ol>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">counter</span>:<span class="number">1</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt;父组件调用子组件并传入HTML代码/其他组件&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		&lt;Son&gt; &lt;div style=&quot;background-color:red;&quot;&gt; &#123;&#123; counter &#125;&#125;&lt;/div&gt; &lt;/Son&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>, &#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">methods</span>:&#123;</span><br><span class="line">		</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt;子组件的标题&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		&lt;slot&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm = app.mount(<span class="string">&quot;#app&quot;</span>)</span><br></pre></td></tr></table></div></figure>

<p><mark>值得注意的是，当父组件与子组件具有同名的变量时，我们父组件传入参数时，子组件的slot中会显示父组件的属性。</mark></p>
<ul>
<li><p>父模板里调用的数据属性，使用的都是父模板里的数据。</p>
</li>
<li><p>子模板里调用的数据属性，使用的都是子模板里的数据。</p>
</li>
</ul>
<p><code>&#123;&#123;counter&#125;&#125;</code> 是在父模板中调用的，那么使用的是父模板的数据。</p>

        <h3 id="slot中的默认数据"   >
          <a href="#slot中的默认数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#slot中的默认数据" class="headerlink" title="slot中的默认数据"></a>slot中的默认数据</h3>
      <p><strong>当slot中无数据传递过来是，写在slot中的数据就是默认显示数据。</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;slot&gt; 这是默认数据 &lt;/slot&gt;</span><br></pre></td></tr></table></div></figure>


        <h3 id="指定若干个插槽的位置-指定不同的name"   >
          <a href="#指定若干个插槽的位置-指定不同的name" class="heading-link"><i class="fas fa-link"></i></a><a href="#指定若干个插槽的位置-指定不同的name" class="headerlink" title="指定若干个插槽的位置(指定不同的name)"></a>指定若干个插槽的位置(指定不同的name)</h3>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;slot name=&quot;first&quot;&gt;&lt;/slot&gt; </span></span><br><span class="line"><span class="string">		&lt;div&gt;这是第二个&lt;/div&gt;</span></span><br><span class="line"><span class="string">		&lt;slot name=&quot;third&quot;&gt;&lt;/slot&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></div></figure>

<p><strong>我们可以看到，指定了name显示区域，在父组件传值的时候，也指定显示在对应name的区域即可。</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = Vue.createApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">methods</span>:&#123;</span><br><span class="line">		</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;Son&gt;</span></span><br><span class="line"><span class="string">			&lt;template v-slot:first&gt; &lt;div&gt;这是First的参数值&lt;/div&gt; &lt;/template&gt;</span></span><br><span class="line"><span class="string">			&lt;template v-slot:third&gt; &lt;div&gt;这是third的参数值&lt;/div&gt; &lt;/template&gt;</span></span><br><span class="line"><span class="string">		&lt;/Son&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></div></figure>
<p><strong>在代码中，我们可以看到，利用 <code>v-slot:XX</code> 可以指定显示在对应子组件name为XX的区域</strong></p>
<p><mark>也可以简写成 <code>#XX</code> </mark></p>

        <h1 id="子组件"   >
          <a href="#子组件" class="heading-link"><i class="fas fa-link"></i></a><a href="#子组件" class="headerlink" title="子组件"></a>子组件</h1>
      
        <h2 id="子组件向父组件传递数据"   >
          <a href="#子组件向父组件传递数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#子组件向父组件传递数据" class="headerlink" title="子组件向父组件传递数据"></a>子组件向父组件传递数据</h2>
      <ul>
<li><p>子组件调用父组件事件</p>
</li>
<li><p>子组件向父组件事件中传递参数</p>
</li>
<li><p>子组件传递参数时，如何通过<code>emits</code>进行校验</p>
</li>
</ul>
<p><strong>根据组件之间的单向数据流，子组件是没办法直接更改父组件传递过来的参数</strong></p>
<p><strong>解决办法</strong></p>
<p><strong>1. 将父组件传递过来的参数赋给子组件的数据 在子组件中更改自己的数据（本段稍后一点内容）</strong></p>
<p><strong>2. 我们可以调用父组件的 “可以改变这个参数值” 的方法，本质上是父组件来改变（紧接着读下去）</strong></p>
<p>比如：我们用父组件更改传递给子组件的counter变量（用一个方法）</p>
<p>在子组件中调用这个方法</p>
<p><strong>仔细看懂，接下来的代码！</strong></p>
<p><strong>仔细看懂，接下来的代码！</strong></p>
<p><strong>仔细看懂，接下来的代码！</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line"><span class="keyword">const</span> app=Vue.createApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">counter</span>: <span class="number">1</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">methods</span>:&#123;</span><br><span class="line">	  <span class="function"><span class="title">parentUpdateCounter</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		  <span class="built_in">this</span>.counter++;</span><br><span class="line">	  &#125;      </span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt;下面调用子组件传入参数counter&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		</span></span><br><span class="line"><span class="string">		&lt;h1&gt;子组件通过父组件的方法，更改这个传递过去的参数（注意区分直接赋给子组件中的data参数）&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		</span></span><br><span class="line"><span class="string">		&lt;Son :counter=&quot;counter&quot; @parentUpdateCounter=&quot;parentUpdateCounter&quot;  /&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//子组件</span></span><br><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>, &#123;</span><br><span class="line">	<span class="attr">props</span>: [<span class="string">&#x27;counter&#x27;</span>],</span><br><span class="line">	<span class="attr">emits</span>:[<span class="string">&#x27;parentUpdateCounter&#x27;</span>],</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line"></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">methods</span>:&#123;</span><br><span class="line">		<span class="function"><span class="title">childUpdate</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="built_in">this</span>.$emit(<span class="string">&#x27;parentUpdateCounter&#x27;</span>)</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt; 这是子组件，我想看到数据变化！&lt;/div&gt;</span></span><br><span class="line"><span class="string">		&lt;div&gt; &#123;&#123; childCounter &#125;&#125;  </span></span><br><span class="line"><span class="string">		   &#123;&#123; counter &#125;&#125; &lt;button @click=&quot; childUpdate &quot;&gt;点我就知道了&lt;/button&gt;</span></span><br><span class="line"><span class="string">		 &lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">	<span class="comment">//可以看到 上面是&#123;&#123; counter &#125;&#125; 直接引用父组件传过去的参数</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm=app.mount(<span class="string">&quot;#app&quot;</span>)</span><br></pre></td></tr></table></div></figure>


        <h3 id="关键代码："   >
          <a href="#关键代码：" class="heading-link"><i class="fas fa-link"></i></a><a href="#关键代码：" class="headerlink" title="关键代码："></a>关键代码：</h3>
      <p><strong>1. 首先在父组件中定义传递过去的变量counter <code>data()&#123;return&#123; counter:1 &#125;&#125;</code></strong></p>
<p><strong>2. 父组件传递过去 <code>&lt;Son :counter=&quot;counter&quot; /&gt;</code></strong></p>
<p><strong>3. 子组件中声明props用来接收 <code>props:[ &#39;counter&#39; ]</code></strong></p>
<p><strong>4. 父组件中写可以更改counter变量的方法 <code>methods:&#123;parentUpdateCounter()&#123;this.counter++&#125;&#125;</code></strong></p>
<p><strong>5. 父组件传递过去 <code>&lt;Son :counter=&quot;counter&quot; @parentUpdateCounter=&quot;parentUpdateCounter&quot;/&gt;</code> (@引用名=“父组件方法名”)</strong></p>
<p><strong>6. 子组件中声明emits用来接收 <code>emits:[&#39;parentUpdateCounter&#39;]</code>(与父组件传递过来的引用名一致)</strong></p>
<p><strong>7. 子组件在需要的时候(一般在子组件自己的方法内部)，调用这个父组件的引用名（代表对应的父组件方法）<code>this.$emit(&#39;parentUpdateCounter&#39;)</code></strong></p>

        <h2 id="子组件利用slot向父组件传递List中的数据"   >
          <a href="#子组件利用slot向父组件传递List中的数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#子组件利用slot向父组件传递List中的数据" class="headerlink" title="子组件利用slot向父组件传递List中的数据"></a>子组件利用slot向父组件传递List中的数据</h2>
      <p><strong>在Javascript中的list中，我们视为对象，因此调用属性是需要 <code>obj.item</code></strong></p>
<ol>
<li>为子组件中添加list数据<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>,&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">names</span>: [<span class="string">&#x27;Vincent&#x27;</span>, <span class="string">&#x27;Beatrix&#x27;</span>, <span class="string">&#x27;James&#x27;</span>]</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;div&gt;</span></span><br><span class="line"><span class="string">			&lt;slot v-for=&quot;name in names&quot; :item=&quot;name&quot;&gt; &lt;/slot&gt;</span></span><br><span class="line"><span class="string">		&lt;/div&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></div></figure></li>
</ol>
<ul>
<li>最重要的就是我们为这个插槽，绑定了item属性，这样父组件可以调用到这个属性。</li>
</ul>
<ol start="2">
<li>父组件调用这个子组件，并得到绑定的item值<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app=Vue.createApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;Son v-slot=&quot;props&quot;&gt; </span></span><br><span class="line"><span class="string">				&lt;div&gt; &#123;&#123; props.item &#125;&#125; &lt;/div&gt;</span></span><br><span class="line"><span class="string">			&lt;/Son&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></div></figure></li>
</ol>
<ul>
<li>props可以任意取名字，但是一定是要绑定<code>item</code>这个属性</li>
</ul>

        <h1 id="校验器（引入-ElementUI）"   >
          <a href="#校验器（引入-ElementUI）" class="heading-link"><i class="fas fa-link"></i></a><a href="#校验器（引入-ElementUI）" class="headerlink" title="校验器（引入 ElementUI）"></a>校验器（引入 ElementUI）</h1>
      <p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://gitee.com/vincent990413/book-store-front-end" >点我，见图书管理系统的前端项目地址</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>

        <h1 id="组件之间的单向数据流"   >
          <a href="#组件之间的单向数据流" class="heading-link"><i class="fas fa-link"></i></a><a href="#组件之间的单向数据流" class="headerlink" title="组件之间的单向数据流"></a>组件之间的单向数据流</h1>
      <p><strong>一句话说明，就是数据从父级组件传递给子组件，只能这样单向（从父到子）绑定</strong></p>
<p><strong>子组件内部不能直接修改从父组件传递过来的数据</strong></p>
<p><strong>比如我们在父组件中定义一个计数器counter，传给子组件后，在子组件中更改这个数据</strong></p>
<p>结论是，我们没办法看到这个数据的变化。</p>
<p><mark>既然我们没办法，直接改变父组件传过来的变量，不如我们只更改子组件data中的变量</mark></p>
<p><strong>但将这个子组件data中的变量 赋值为父组件传过来的变量</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">比如父组件传过来的变量为counter</span><br><span class="line"></span><br><span class="line"><span class="comment">//父组件</span></span><br><span class="line"><span class="keyword">const</span> app=Vue.createApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">counter</span>: <span class="number">1</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">methods</span>:&#123;</span><br><span class="line"></span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt;下面调用子组件并静态传入函数参数talk&lt;/h1&gt;</span></span><br><span class="line"><span class="string">		&lt;Son :counter = &quot;counter&quot; /&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//子组件中</span></span><br><span class="line">app.component(<span class="string">&#x27;myComponentCounter&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">props</span>: [<span class="string">&#x27;counter&#x27;</span>],</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="comment">//关键一步，我们赋给可以改变的childCounter</span></span><br><span class="line">			<span class="attr">childCounter</span>: <span class="built_in">this</span>.counter</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&#123;&#123; childCounter &#125;&#125; &lt;button @click=&quot; childCounter++ &quot;&gt; 点我可以看到数据的变化 &lt;/button&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>

<p><strong>这样我们就可以看到数据的变化了！</strong></p>
<ul>
<li>思考，为什么要有单向数据流的概念呢？</li>
<li>因为，如果父组件使用多个相同的子组件，传入不同的参数，我们希望这些子组件互不干扰。</li>
</ul>
<p><strong>也就是说，子组件不能直接更改父组件的数据，而是更改自己的数据。</strong></p>

        <h1 id="异步组件和Promise讲解"   >
          <a href="#异步组件和Promise讲解" class="heading-link"><i class="fas fa-link"></i></a><a href="#异步组件和Promise讲解" class="headerlink" title="异步组件和Promise讲解"></a>异步组件和Promise讲解</h1>
      
        <h2 id="异步的概念"   >
          <a href="#异步的概念" class="heading-link"><i class="fas fa-link"></i></a><a href="#异步的概念" class="headerlink" title="异步的概念"></a>异步的概念</h2>
      <p><strong>所谓异步，就是几个操作不是按严格的顺序执行（真正的执行顺序未知）</strong></p>
<p><strong>与它相反的概念是同步：</strong></p>
<ul>
<li>举个例子，如何将大象塞到冰箱里？</li>
</ul>
<ol>
<li><p>打开冰箱</p>
</li>
<li><p>将大象塞进去</p>
</li>
<li><p>关掉冰箱门</p>
</li>
</ol>
<p>以上的操作就是同步的，具有严格的前后时序。</p>
<p><em>一般而言，我们将经常要去后台请求数据的业务/组件，封装成异步的。</em></p>

        <h2 id="Promise"   >
          <a href="#Promise" class="heading-link"><i class="fas fa-link"></i></a><a href="#Promise" class="headerlink" title="Promise"></a>Promise</h2>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">app.component(<span class="string">&#x27;async-component&#x27;</span>,Vue.defineAsyncComponent(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">            resolve(&#123;</span><br><span class="line">                <span class="attr">template</span>:<span class="string">`&lt;div&gt;这是一个异步组件&lt;/div&gt;`</span></span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;,<span class="number">3000</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;))</span><br></pre></td></tr></table></div></figure>

<p><strong>我们在调用这个组件时，三秒钟后，会出现对应组件中的内容</strong></p>
<ul>
<li>关于Promise的概念，详情<span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://vincent990413.gitee.io/myblog/2021/03/15/JavaScript/#promise-%E7%B1%BB%E8%A7%A3%E5%86%B3%E5%89%8D%E7%AB%AF%E5%BC%82%E6%AD%A5%E8%B0%83%E7%94%A8%E5%90%8E%E5%8F%B0%E6%95%B0%E6%8D%AE" >点我去JavaSCript基础教程</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></li>
</ul>

        <h1 id="爷孙级别组件数据传递（多用于多级组件）"   >
          <a href="#爷孙级别组件数据传递（多用于多级组件）" class="heading-link"><i class="fas fa-link"></i></a><a href="#爷孙级别组件数据传递（多用于多级组件）" class="headerlink" title="爷孙级别组件数据传递（多用于多级组件）"></a>爷孙级别组件数据传递（多用于多级组件）</h1>
      
        <h2 id="顺序依次继承数据"   >
          <a href="#顺序依次继承数据" class="heading-link"><i class="fas fa-link"></i></a><a href="#顺序依次继承数据" class="headerlink" title="顺序依次继承数据"></a>顺序依次继承数据</h2>
      <p><strong>如果有一个爷爷，他现在有一套房子（北京四合院），想过继下去。</strong></p>
<p>我们就可以实现：</p>
<ol>
<li>从爷爷过继给父亲，再从父亲过继给孙子 props参数<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app=Vue.createApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">house</span>: <span class="string">&#x27;北京四合院，价值8000万！&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h1&gt; 这是爷爷，爷爷过继给儿子！ &lt;/h1&gt;</span></span><br><span class="line"><span class="string">		&lt;Son :house=&quot;house&quot; /&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">props</span>:[<span class="string">&#x27;house&#x27;</span>],</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h2&gt;儿子接受房子，这个房子是： &#123;&#123; house &#125;&#125; &lt;h2&gt;</span></span><br><span class="line"><span class="string">		&lt;h2&gt;儿子继续过继给孙子&lt;/h2&gt;</span></span><br><span class="line"><span class="string">		&lt;Grandson :house=&quot;house&quot; /&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;Grandson&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">props</span>:[<span class="string">&#x27;house&#x27;</span>],</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h3&gt;这是孙子，接受房子，房子信息是： &#123;&#123;house&#125;&#125; &lt;/h3&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm=app.mount(<span class="string">&quot;#app&quot;</span>)</span><br></pre></td></tr></table></div></figure></li>
</ol>
<p><strong>这样通过依次继承的方法，的确可以做到将“爷爷”级别的组件数据传递给“孙子”组件</strong></p>
<p><em>但如果项目中出现5，6次继承层次的孙孙孙…这样代码就太冗余了</em></p>

        <h2 id="指定组件层次接受参数-Provide-amp-Inject"   >
          <a href="#指定组件层次接受参数-Provide-amp-Inject" class="heading-link"><i class="fas fa-link"></i></a><a href="#指定组件层次接受参数-Provide-amp-Inject" class="headerlink" title="指定组件层次接受参数 Provide&amp;Inject"></a>指定组件层次接受参数 Provide&amp;Inject</h2>
      <p><strong>Provide意为提供参数，Inject引入接受、注入参数</strong></p>
<p><strong>也就是说，我们在“祖先”级别的组件提供某个参数，可以跳过中间的若干个组件，直接过继给指定的组件</strong></p>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app=Vue.createApp(&#123;</span><br><span class="line">	<span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span>&#123;</span><br><span class="line">			<span class="attr">house</span>: <span class="string">&#x27;北京四合院，价值8000万！&#x27;</span></span><br><span class="line">		&#125;</span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">provide</span>:&#123;</span><br><span class="line">		<span class="attr">houseDirectlyToGrandson</span>: <span class="string">&#x27;给孙子的海景房！&#x27;</span></span><br><span class="line">	&#125;,</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">			&lt;h1&gt; 这是爷爷，爷爷不过继给儿子，直接给孙子！ &lt;/h1&gt;</span></span><br><span class="line"><span class="string">			&lt;Son/&gt;</span></span><br><span class="line"><span class="string">		`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;Son&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">props</span>:[<span class="string">&#x27;house&#x27;</span>],</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h2&gt;这是儿子，不接受参数，不传递参数！&lt;/h2&gt;</span></span><br><span class="line"><span class="string">		&lt;Grandson/&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.component(<span class="string">&#x27;Grandson&#x27;</span>,&#123;</span><br><span class="line">	<span class="attr">props</span>:[<span class="string">&#x27;house&#x27;</span>],</span><br><span class="line">	<span class="attr">inject</span>:[<span class="string">&#x27;houseDirectlyToGrandson&#x27;</span>],</span><br><span class="line">	<span class="attr">template</span>:<span class="string">`</span></span><br><span class="line"><span class="string">		&lt;h3&gt;这是孙子，接受房子，房子信息是： &#123;&#123;houseDirectlyToGrandson&#125;&#125; &lt;/h3&gt;</span></span><br><span class="line"><span class="string">	`</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> vm=app.mount(<span class="string">&quot;#app&quot;</span>)</span><br></pre></td></tr></table></div></figure>

<p><strong>关键代码：</strong></p>
<ol>
<li><p>在爷爷组件中，提供属性 <code>provide:&#123; newHounse:&#39;新房子&#39; &#125;</code></p>
</li>
<li><p>在任意后代组件中，提供注入参数：<code>inject:[&#39;newHouse&#39;]</code> 即可引用</p>
</li>
</ol>
<ul>
<li><p>如果这种层级关系达到5-6级，再使用props进行传递，那就会非常麻烦，而且会有大量的代码冗余。</p>
</li>
<li><p>使用provide和inject可以解决这个问题。</p>
</li>
</ul>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/15/Java%E5%8F%8D%E5%B0%84%E6%9C%BA%E5%88%B6-%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">Java反射机制-学习笔记</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-15</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-04-15</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">193</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">1分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="Java中的反射机制-笔记"   >
          <a href="#Java中的反射机制-笔记" class="heading-link"><i class="fas fa-link"></i></a><a href="#Java中的反射机制-笔记" class="headerlink" title="Java中的反射机制-笔记"></a>Java中的反射机制-笔记</h1>
      
        <h2 id="反射原理的介绍-能利用反射做什么"   >
          <a href="#反射原理的介绍-能利用反射做什么" class="heading-link"><i class="fas fa-link"></i></a><a href="#反射原理的介绍-能利用反射做什么" class="headerlink" title="反射原理的介绍(能利用反射做什么)"></a>反射原理的介绍(能利用反射做什么)</h2>
      <ul>
<li>获得类的信息 Class</li>
<li>获得类中的属性信息 Field</li>
<li>获得类中的方法信息 Method</li>
<li>获得类中的修饰符 Classifier  </li>
<li>获得类中的构造方法 Constructor  </li>
<li>获得该类所继承的父类 SuperClass 所实现的接口 Interface  </li>
</ul>
<p><img   src="https://img-blog.csdnimg.cn/2021041417283795.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="测试类-User-java-含属性以及Setter、Getter方法"   >
          <a href="#测试类-User-java-含属性以及Setter、Getter方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#测试类-User-java-含属性以及Setter、Getter方法" class="headerlink" title="测试类 User.java(含属性以及Setter、Getter方法)"></a>测试类 User.java(含属性以及Setter、Getter方法)</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210414172902285.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="测试类"></p>

        <h2 id="利用反射获取该User类"   >
          <a href="#利用反射获取该User类" class="heading-link"><i class="fas fa-link"></i></a><a href="#利用反射获取该User类" class="headerlink" title="利用反射获取该User类"></a>利用反射获取该User类</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210414172921833.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="获取类"></p>

        <h2 id="获取User类中的方法以及属性"   >
          <a href="#获取User类中的方法以及属性" class="heading-link"><i class="fas fa-link"></i></a><a href="#获取User类中的方法以及属性" class="headerlink" title="获取User类中的方法以及属性"></a>获取User类中的方法以及属性</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210414172947638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="获取方法"></p>

        <h2 id="获取User类所继承的父类（默认为Object）以及实现的接口"   >
          <a href="#获取User类所继承的父类（默认为Object）以及实现的接口" class="heading-link"><i class="fas fa-link"></i></a><a href="#获取User类所继承的父类（默认为Object）以及实现的接口" class="headerlink" title="获取User类所继承的父类（默认为Object）以及实现的接口"></a>获取User类所继承的父类（默认为Object）以及实现的接口</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210414173008844.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="获取父类以及接口"></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/14/Java%E9%9B%86%E5%90%88%E6%A1%86%E6%9E%B6-%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0/">Java集合框架-基础学习</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-14</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-04-15</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">173</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">1分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="Collecion-集合框架"   >
          <a href="#Collecion-集合框架" class="heading-link"><i class="fas fa-link"></i></a><a href="#Collecion-集合框架" class="headerlink" title="Collecion 集合框架"></a>Collecion 集合框架</h1>
      
        <h2 id="ArrayList-动态数组-顺序表）"   >
          <a href="#ArrayList-动态数组-顺序表）" class="heading-link"><i class="fas fa-link"></i></a><a href="#ArrayList-动态数组-顺序表）" class="headerlink" title="ArrayList(动态数组-顺序表）"></a>ArrayList(动态数组-顺序表）</h2>
      <p><strong>ArrayList是一个可动态修改数据、删除数据的数组</strong>  </p>
<p><strong>没有固定的大小限制（可以看做是Vector的定义）</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210414111059118.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="ArrayList基本图"></p>

        <h3 id="（附）Java集合中各个容器的关系"   >
          <a href="#（附）Java集合中各个容器的关系" class="heading-link"><i class="fas fa-link"></i></a><a href="#（附）Java集合中各个容器的关系" class="headerlink" title="（附）Java集合中各个容器的关系"></a>（附）Java集合中各个容器的关系</h3>
      <p><img   src="https://img-blog.csdnimg.cn/20210414111647555.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h3 id="添加数据、删除数据等操作"   >
          <a href="#添加数据、删除数据等操作" class="heading-link"><i class="fas fa-link"></i></a><a href="#添加数据、删除数据等操作" class="headerlink" title="添加数据、删除数据等操作"></a>添加数据、删除数据等操作</h3>
      <p><img   src="https://img-blog.csdnimg.cn/20210414111653473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h3 id="迭代方法以及其他常见方法"   >
          <a href="#迭代方法以及其他常见方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#迭代方法以及其他常见方法" class="headerlink" title="迭代方法以及其他常见方法"></a>迭代方法以及其他常见方法</h3>
      <p>更多见： <strong><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://www.runoob.com/java/java-collections.html" >菜鸟教程集合框架…</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></strong><br><img   src="https://img-blog.csdnimg.cn/20210414111657315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="LinkedList-链表）"   >
          <a href="#LinkedList-链表）" class="heading-link"><i class="fas fa-link"></i></a><a href="#LinkedList-链表）" class="headerlink" title="LinkedList(链表）"></a>LinkedList(链表）</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210415143500877.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><img   src="https://img-blog.csdnimg.cn/20210415143505267.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="HashMap-基于键值对Key-Value的哈希映射）"   >
          <a href="#HashMap-基于键值对Key-Value的哈希映射）" class="heading-link"><i class="fas fa-link"></i></a><a href="#HashMap-基于键值对Key-Value的哈希映射）" class="headerlink" title="HashMap(基于键值对Key-Value的哈希映射）"></a>HashMap(基于键值对Key-Value的哈希映射）</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210415143513937.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><img   src="https://img-blog.csdnimg.cn/20210415143518117.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>

        <h2 id="HashSet-基于HashMap的不重复元素的集合）"   >
          <a href="#HashSet-基于HashMap的不重复元素的集合）" class="heading-link"><i class="fas fa-link"></i></a><a href="#HashSet-基于HashMap的不重复元素的集合）" class="headerlink" title="HashSet(基于HashMap的不重复元素的集合）"></a>HashSet(基于HashMap的不重复元素的集合）</h2>
      <p><img   src="https://img-blog.csdnimg.cn/20210415135927238.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="HashSet 集合"><br><img   src="https://img-blog.csdnimg.cn/20210415135931624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="HashSet 集合"></p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/10/Java%E6%8A%80%E5%B7%A7-Redis%E5%AD%98%E5%82%A8/">SpringRedis_存储Map中的KV与读取</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-10</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-23</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">226</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">2分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="依赖注入"   >
          <a href="#依赖注入" class="heading-link"><i class="fas fa-link"></i></a><a href="#依赖注入" class="headerlink" title="依赖注入"></a>依赖注入</h1>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;dependency&gt;</span><br><span class="line">	&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;</span><br><span class="line">	&lt;artifactId&gt;spring-boot-starter-data-redis&lt;/artifactId&gt;</span><br><span class="line">&lt;/dependency&gt;</span><br></pre></td></tr></table></div></figure>


        <h1 id="配置文件-application-yml"   >
          <a href="#配置文件-application-yml" class="heading-link"><i class="fas fa-link"></i></a><a href="#配置文件-application-yml" class="headerlink" title="配置文件 application.yml"></a>配置文件 application.yml</h1>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">spring:</span><br><span class="line">  redis:</span><br><span class="line">    port:<span class="number">6379</span></span><br></pre></td></tr></table></div></figure>


        <h1 id="实例代码（存储同一个map下的-gt-key-value值）"   >
          <a href="#实例代码（存储同一个map下的-gt-key-value值）" class="heading-link"><i class="fas fa-link"></i></a><a href="#实例代码（存储同一个map下的-gt-key-value值）" class="headerlink" title="实例代码（存储同一个map下的-&gt;key:value值）"></a>实例代码（存储同一个map下的-&gt;key:value值）</h1>
      
        <h2 id="Controller层注入StringRedisTemplate"   >
          <a href="#Controller层注入StringRedisTemplate" class="heading-link"><i class="fas fa-link"></i></a><a href="#Controller层注入StringRedisTemplate" class="headerlink" title="Controller层注入StringRedisTemplate"></a>Controller层注入StringRedisTemplate</h2>
      <p><strong>关于Redis在SpringBoot中，有两个</strong></p>
<p>第一个是<strong>RedisTemplate</strong></p>
<p>第二个是<strong>StringRedisTemplate</strong></p>
<p>如果想以字符串的形式存储，选择<strong>StringRedisTemplate</strong>即可。</p>
<p><strong>存值</strong></p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@Autowired</span></span><br><span class="line"><span class="keyword">private</span> StringRedisTemplate stringRedisTemplate;</span><br><span class="line"></span><br><span class="line"><span class="comment">//存值：</span></span><br><span class="line">stringRedisTemplate.opsForHash().put(<span class="string">&quot;student&quot;</span>, <span class="string">&quot;name1&quot;</span>, <span class="string">&quot;vincent&quot;</span>);</span><br><span class="line">stringRedisTemplate.opsForHash().put(<span class="string">&quot;student&quot;</span>, <span class="string">&quot;name2&quot;</span>, <span class="string">&quot;Jack&quot;</span>);</span><br></pre></td></tr></table></div></figure>

<p><strong>取值</strong></p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//结果是vincent</span></span><br><span class="line">String redisCode = (String) stringRedisTemplate.opsForHash().get(<span class="string">&quot;student&quot;</span>, name1);</span><br></pre></td></tr></table></div></figure>


        <h1 id="通过Redis-cli查看"   >
          <a href="#通过Redis-cli查看" class="heading-link"><i class="fas fa-link"></i></a><a href="#通过Redis-cli查看" class="headerlink" title="通过Redis-cli查看"></a>通过Redis-cli查看</h1>
      
        <h2 id="首先打开redis-serve-exe"   >
          <a href="#首先打开redis-serve-exe" class="heading-link"><i class="fas fa-link"></i></a><a href="#首先打开redis-serve-exe" class="headerlink" title="首先打开redis-serve.exe"></a>首先打开redis-serve.exe</h2>
      
        <h2 id="打开redis-cli-exe"   >
          <a href="#打开redis-cli-exe" class="heading-link"><i class="fas fa-link"></i></a><a href="#打开redis-cli-exe" class="headerlink" title="打开redis-cli.exe"></a>打开redis-cli.exe</h2>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//hget map key 返回value</span></span><br><span class="line">hget student name1 </span><br></pre></td></tr></table></div></figure>

<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hset student name1</span><br></pre></td></tr></table></div></figure>

<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hdel student name1</span><br></pre></td></tr></table></div></figure></div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/10/Java%E6%8A%80%E5%B7%A7-SpringBoot-PageHelper%E6%A0%B9%E6%8D%AE%E9%A1%B5%E6%95%B0%E6%95%B0%E6%8D%AE%E5%88%86%E9%A1%B5%E6%98%BE%E7%A4%BA/">PageHelper根据页数数据分页显示</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-10</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-23</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">153</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">1分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="引入依赖"   >
          <a href="#引入依赖" class="heading-link"><i class="fas fa-link"></i></a><a href="#引入依赖" class="headerlink" title="引入依赖"></a>引入依赖</h1>
      <figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- pagehelper --&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">dependency</span>&gt;</span></span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;<span class="name">groupId</span>&gt;</span>com.github.pagehelper<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>pagehelper-spring-boot-starter<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span></span><br><span class="line"><span class="xml">	<span class="tag">&lt;<span class="name">version</span>&gt;</span>1.2.5<span class="tag">&lt;/<span class="name">version</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">dependency</span>&gt;</span></span>        </span><br></pre></td></tr></table></div></figure>


        <h1 id="配置文件"   >
          <a href="#配置文件" class="heading-link"><i class="fas fa-link"></i></a><a href="#配置文件" class="headerlink" title="配置文件"></a>配置文件</h1>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">pagehelper:</span><br><span class="line">  helperDialect: mysql</span><br><span class="line">  reasonable: <span class="keyword">true</span></span><br><span class="line">  supportMethodsArguments: <span class="keyword">true</span></span><br><span class="line">  params: count=countSql</span><br></pre></td></tr></table></div></figure>


        <h1 id="实例代码"   >
          <a href="#实例代码" class="heading-link"><i class="fas fa-link"></i></a><a href="#实例代码" class="headerlink" title="实例代码"></a>实例代码</h1>
      <figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//startNum=1, pageSize=5</span></span><br><span class="line"><span class="comment">//页数为第一页 每页大小为5</span></span><br><span class="line">PageHelper.startPage(startNum, pageSize);</span><br><span class="line">List&lt;Book&gt; list = bookService.findAllBooks();</span><br><span class="line">PageInfo pageInfo = <span class="keyword">new</span> PageInfo(list, pageSize);</span><br><span class="line"><span class="keyword">return</span> <span class="keyword">new</span> ApiResponse(<span class="number">200</span>, <span class="string">&quot;请求成功&quot;</span>, pageInfo);</span><br></pre></td></tr></table></div></figure>

</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/09/%E4%B8%8D%E4%BC%9A%E5%90%A7%E8%80%83%E7%A0%94%E6%94%BF%E6%B2%BB/">政治上60分就够了？不是吧，你一定要看看</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-09</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-04-09</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">658</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">3分</span></span></div></header><div class="post-body"><div class="post-excerpt"><!-- 页面必备样式 -->
<style>
.back-top{position: fixed;top: 500px;height: 0px;float: right;right: 50px;}
.back-top>a{font-weight:bold;width: 50px;height: 50px;text-align: center;text-decoration: none;font-size: 5px;line-height: 50px;border-radius: 50px;background-color:rgba(255,255,255,0.5);}
</style>
<div class="back-top">
    <a href="#top"> >返回顶部< </a>
</div>
<!-- toc -->
<!-- 必备样式结束 -->


        <h1 id="政治准备书籍或资料"   >
          <a href="#政治准备书籍或资料" class="heading-link"><i class="fas fa-link"></i></a><a href="#政治准备书籍或资料" class="headerlink" title="政治准备书籍或资料"></a>政治准备书籍或资料</h1>
      
        <h2 id="1-徐涛老师的《核心考案》"   >
          <a href="#1-徐涛老师的《核心考案》" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-徐涛老师的《核心考案》" class="headerlink" title="1. 徐涛老师的《核心考案》"></a>1. 徐涛老师的《核心考案》</h2>
      <p>徐涛老师的核心考案就像是一本书的大纲一样，从马原的第一章到思修法基的最后一章。</p>
<p>该书都涵盖了该有的考点，当然最好是能够：</p>
<p><strong>边看核心考案，边做笔记，老师会勾画重点</strong></p>

        <h2 id="2-肖秀荣老师的《1000题》"   >
          <a href="#2-肖秀荣老师的《1000题》" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-肖秀荣老师的《1000题》" class="headerlink" title="2.肖秀荣老师的《1000题》"></a>2.肖秀荣老师的《1000题》</h2>
      <p>可以说，市面上的题目质量，最好的前几名，肖老师的《1000题》一定名列前茅。</p>
<p>可以选择一手听徐涛老师的强化课，</p>
<p>一手<strong>做肖老师的1000题</strong> 当然最好是能反复！！</p>
<p>我的方法就是：<br><strong>第一遍用铅笔做，答案都写在题目的左侧</strong></p>
<p><strong>然后第二遍可以，用中性笔做，记得标出经常错的题目</strong></p>

        <h2 id="3-腿姐的技巧班"   >
          <a href="#3-腿姐的技巧班" class="heading-link"><i class="fas fa-link"></i></a><a href="#3-腿姐的技巧班" class="headerlink" title="3. 腿姐的技巧班"></a>3. 腿姐的技巧班</h2>
      <p>腿姐的技巧班可以说，真的是<strong>实战</strong>。</p>
<p>不玩虚的，就是教你如何从<strong>历年真题出发，到底如何高效地做题</strong></p>
<p>如果有条件，<strong>一定听一下腿姐的相关配套课程！</strong></p>

        <h2 id="4-肖老师的《肖四》《肖八》"   >
          <a href="#4-肖老师的《肖四》《肖八》" class="heading-link"><i class="fas fa-link"></i></a><a href="#4-肖老师的《肖四》《肖八》" class="headerlink" title="4. 肖老师的《肖四》《肖八》"></a>4. 肖老师的《肖四》《肖八》</h2>
      <p>针对于去年考研，我想说：</p>
<p>我绝对会给这两本书<strong>五颗星</strong> ☆☆☆☆☆</p>
<p>原因不详细阐述，我多次在公开场合提到，你一定要备这两本书！</p>

        <h2 id="5-注意关注徐涛老师的微博、徐涛老师的微信公众号"   >
          <a href="#5-注意关注徐涛老师的微博、徐涛老师的微信公众号" class="heading-link"><i class="fas fa-link"></i></a><a href="#5-注意关注徐涛老师的微博、徐涛老师的微信公众号" class="headerlink" title="5.注意关注徐涛老师的微博、徐涛老师的微信公众号"></a>5.注意关注徐涛老师的微博、徐涛老师的微信公众号</h2>
      
        <h1 id="时间安排"   >
          <a href="#时间安排" class="heading-link"><i class="fas fa-link"></i></a><a href="#时间安排" class="headerlink" title="时间安排"></a>时间安排</h1>
      
        <h2 id="7月份-开始复习"   >
          <a href="#7月份-开始复习" class="heading-link"><i class="fas fa-link"></i></a><a href="#7月份-开始复习" class="headerlink" title="7月份~开始复习"></a>7月份~开始复习</h2>
      <p>基本上你会看到，大部分同学都是在这个时间点开始复习。</p>
<p>我是在七月份开始<strong>复习政治与专业课</strong></p>
<p>政治每天安排：</p>
<p><strong>傍晚：1~2节徐涛老师的视频课</strong></p>
<p><strong>然后做一做肖老师的《1000题》</strong></p>

        <h2 id="9月份-技巧阶段"   >
          <a href="#9月份-技巧阶段" class="heading-link"><i class="fas fa-link"></i></a><a href="#9月份-技巧阶段" class="headerlink" title="9月份-技巧阶段"></a>9月份-技巧阶段</h2>
      <p>在这个时候 基本上 <strong>你应该完成考研政治的大部分内容了</strong></p>
<p>这个时候，其实是比较建议<strong>听腿姐老师的《核心技巧班》</strong></p>
<p>因为还是那句话，我们最终是要上考场做题的</p>
<p>所以，技巧班能从题目本身教我们如何做题？</p>
<p>避免以自己的思维来做题</p>

        <h2 id="12月份-“背多分”-协奏曲！"   >
          <a href="#12月份-“背多分”-协奏曲！" class="heading-link"><i class="fas fa-link"></i></a><a href="#12月份-“背多分”-协奏曲！" class="headerlink" title="12月份 “背多分” 协奏曲！"></a>12月份 “背多分” 协奏曲！</h2>
      <p>可以说，政治考得好不好。就看最后这些时间</p>
<p><strong>我强烈建议 要多看肖秀荣老师的《肖四》 《肖八》</strong></p>
<p>当然如果能够买一本<strong>徐涛老师的“小黄书”《背诵笔记》</strong>，辅佐以素材是更好的了</p>
</div></div></article><article class="postlist-item post"><header class="post-header"><h1 class="post-title"><a class="post-title__link" href="/blog/2021/04/09/2021%E5%B9%B4%E8%AE%A1%E7%AE%97%E6%9C%BA%E9%87%8D%E5%BA%86%E9%82%AE%E7%94%B5%E5%A4%A7%E5%AD%A6%E7%A0%94%E7%A9%B6%E7%94%9F%E5%85%A5%E5%AD%A6%E8%80%83%E8%AF%95%E7%BB%8F%E9%AA%8C/">2021年计算机重庆邮电大学研究生入学考试经验</a></h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-04-09</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-05-14</span></span><span class="post-meta-item post-meta-item--wordcount"><span class="post-meta-item__icon"><i class="far fa-file-word"></i></span><span class="post-meta-item__info">字数统计</span><span class="post-meta-item__value">3.1k</span></span><span class="post-meta-item post-meta-item--readtime"><span class="post-meta-item__icon"><i class="far fa-clock"></i></span><span class="post-meta-item__info">阅读时长</span><span class="post-meta-item__value">16分</span></span></div></header><div class="post-body"><div class="post-excerpt">
        <h1 id="前言-Preface"   >
          <a href="#前言-Preface" class="heading-link"><i class="fas fa-link"></i></a><a href="#前言-Preface" class="headerlink" title="前言 Preface"></a>前言 Preface</h1>
      <p>一年一度的全国研究生入学考试终于落下帷幕。今天是2021-04-09，距离2121届研究生入学考试已经过去了几个月的时间。</p>
<p>现在终于能够静下心来，好好分析自己走过的旅程。以及总结踩过的雷区，错误的学习方法以及可以分享给大家的<strong>好方法</strong>，</p>
<p>当然百密难逃一疏，恳请理解。</p>

        <h1 id="感谢信-Acknowledgement"   >
          <a href="#感谢信-Acknowledgement" class="heading-link"><i class="fas fa-link"></i></a><a href="#感谢信-Acknowledgement" class="headerlink" title="感谢信 Acknowledgement"></a>感谢信 Acknowledgement</h1>
      <p>在我写这篇文章的时候，首先感谢<strong>在考研过程中</strong>给我提供帮助的小哥哥、小姐姐。</p>
<p>首先感谢我的本科学校：攀枝花学院</p>
<p>真的是所很棒的学校 我在这里遇到了很多优秀的人！感谢你PANDA</p>
<p>感谢我在考研前期准备阶段给我提供资料、一直给我打气的<strong>权哥、涛兄</strong>（什么时候开博客啊？我给您们开友链呢！）</p>
<p>感谢提供给我关于专业知识的2016级直系<strong>高学长</strong>，谢谢你</p>
<p>感谢在复试过程中给予我帮助，曾面试我给我宝贵面试经验的莲莲学姐（抱歉我不知道您的真名）</p>
<p>感谢我们的<strong>301寝室的小哥哥</strong>、<strong>尤其感谢一起备考的李总</strong>（李总博客会放在友链里面，咱们得支棱起来！）</p>
<p>感谢外语院的摄影师秋水（一定前程似锦）</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">❤ 感谢我的宝贝儿乐乐 谢谢你在我考研路上出现在我的生命里 爱你么么哒 ❤</span><br></pre></td></tr></table></div></figure>

<p>☆☆☆ 特别感谢：</p>
<p><strong>直系学姐-小七，非常，非常，非常感谢在我初试、复试过程中的无私帮助！简直就是我的贵人，大佬受小弟一拜。</strong></p>
<p>有想学舞蹈的小姐姐可以找她，专业的！</p>
<p><strong>需要任何帮助可以加我的微信噢</strong>，我会及时回复：</p>
<p><img   src="https://img-blog.csdnimg.cn/20210409165733759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p>Without further ado 废话少说还是直接进入正题。</p>
<p>：）老规矩，介绍自己参加考研的<strong>基本情况</strong>。</p>
<p>报考院校：<strong>重庆邮电大学</strong>（忍不住Bold字体，真的是好学校）</p>
<p>专业/类型：电子信息（<strong>专业型硕士学位</strong>）</p>

        <h1 id="考研分数情况-Info"   >
          <a href="#考研分数情况-Info" class="heading-link"><i class="fas fa-link"></i></a><a href="#考研分数情况-Info" class="headerlink" title="考研分数情况 Info"></a>考研分数情况 Info</h1>
      <p>##（初试分数：复试分数=6：4）</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">☆ 初试：（总分<span class="number">357</span>分）</span><br><span class="line">	<span class="number">1.</span> 政治： <span class="number">71</span>分</span><br><span class="line">	<span class="number">2.</span> 英语： <span class="number">79</span>分</span><br><span class="line">	<span class="number">3.</span> 数学： <span class="number">116</span>分</span><br><span class="line">	<span class="number">4.</span> 专业课： <span class="number">91</span>分（计算机网络）</span><br><span class="line"></span><br><span class="line">☆ 复试：</span><br><span class="line">	<span class="number">1.</span>英语口语、听力：<span class="number">18.8</span>分（总分<span class="number">20</span>分）</span><br><span class="line">	<span class="number">2.</span>笔试分数：<span class="number">92</span>分（总分<span class="number">100</span>分）</span><br><span class="line">	<span class="number">3.</span>综合面试：<span class="number">90</span>分（总分<span class="number">100</span>分）</span><br></pre></td></tr></table></div></figure>

<p><img   src="https://img-blog.csdnimg.cn/2021040920533010.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="初试成绩"></p>
<p><img src="https://img-blog.csdnimg.cn/20210409205536318.png" alt="总体成绩"></p>

        <h1 id="初试过程-Process"   >
          <a href="#初试过程-Process" class="heading-link"><i class="fas fa-link"></i></a><a href="#初试过程-Process" class="headerlink" title="初试过程 Process"></a>初试过程 Process</h1>
      
        <h2 id="1-考研择校"   >
          <a href="#1-考研择校" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-考研择校" class="headerlink" title="1.考研择校"></a>1.考研择校</h2>
      
        <h3 id="择校成功-考研成功1-4"   >
          <a href="#择校成功-考研成功1-4" class="heading-link"><i class="fas fa-link"></i></a><a href="#择校成功-考研成功1-4" class="headerlink" title="择校成功 = 考研成功1/4"></a>择校成功 = 考研成功1/4</h3>
      <p>我想特别说明关于你的<strong>target university目标院校</strong>的重要性！</p>
<p>首先你可以通过你的<strong>目标院校研究生院</strong>获得相关信息</p>
<p>比如重庆邮电大学为例：</p>
<p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://yjs.cqupt.edu.cn/ejlby.jsp?a7t=28&a7p=5&a7c=10&urltype=tree.TreeTempUrl&wbtreeid=1006" >点我进入重庆邮电大学官网研究生院</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<p>那么看什么？</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">首先看报考的目标专业招多少人？</span><br><span class="line"></span><br><span class="line">初试科目考哪些？考英语一还是英语二？专业课考<span class="number">408</span>还是只考其中部分科目？</span><br><span class="line"></span><br><span class="line">以及对应的科目参考书籍。</span><br><span class="line"></span><br></pre></td></tr></table></div></figure>

<p>注意：有可能<strong>你想报考的专业分布于不同学院：比如</strong>软件学院、XX学院、然后<strong>不同学院招收的人数不同</strong>。</p>
<p>这里我给出地址（方便各位下载）：</p>
<p><span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="http://yjs.cqupt.edu.cn/info/1006/6529.htm" >2021年计算机科学与技术学院/重邮科大讯飞人工智能学院硕士研究生招生报考指南：</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
<p>网址里面有：</p>
<ol>
<li><p>学院的<strong>招生专业信息</strong></p>
</li>
<li><p><strong>初试参考书目</strong></p>
</li>
<li><p><strong>初复试考试大纲</strong></p>
</li>
<li><p>最新的<strong>初试专业课真题！</strong></p>
</li>
</ol>
<p>如图所示：</p>
<p><img   src="https://img-blog.csdnimg.cn/2021040915320363.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<ol start="2">
<li>看完相应的科目，要顺便看看：<strong>学术型硕士与专业型硕士</strong>参考科目的不同。</li>
</ol>
<p>以<strong>重庆邮电大学</strong>为例（注意，这里的专业课不同的学校可能是不同的，<strong>而且考的门数也不同，要仔细看看</strong>）</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">* 专业型硕士：</span><br><span class="line">	<span class="number">1.</span> 数学二（高等数学+线性代数）</span><br><span class="line">	<span class="number">2.</span> 英语二</span><br><span class="line">	<span class="number">3.</span> 政治</span><br><span class="line">	<span class="number">4.</span> 计算机网络</span><br><span class="line">* 学术型硕士：</span><br><span class="line">	<span class="number">1.</span> 数学一（高等数学+线性代数+概率论）</span><br><span class="line">	<span class="number">2.</span> 英语一</span><br><span class="line">	<span class="number">3.</span> 政治</span><br><span class="line">	<span class="number">4.</span> 数据结构</span><br></pre></td></tr></table></div></figure>

<p>直接上图：<br><img   src="https://img-blog.csdnimg.cn/20210409153859210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"><br><img   src="https://img-blog.csdnimg.cn/20210409153927492.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p>上图是<strong>学术型硕士的基本招收信息</strong></p>
<p>下图是<strong>专业型硕士的基本招收信息</strong></p>
<p><img   src="https://img-blog.csdnimg.cn/20210409154041948.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p>具体看你所报考的院校基本信息！</p>
<p>那么，以上就是<strong>真正地准备初试所需要的基本信息收集</strong></p>

        <h2 id="2-各科目准备过程"   >
          <a href="#2-各科目准备过程" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-各科目准备过程" class="headerlink" title="2. 各科目准备过程"></a>2. 各科目准备过程</h2>
      
        <h3 id="数学（初试中的爸爸ROLE）"   >
          <a href="#数学（初试中的爸爸ROLE）" class="heading-link"><i class="fas fa-link"></i></a><a href="#数学（初试中的爸爸ROLE）" class="headerlink" title="数学（初试中的爸爸ROLE）"></a>数学（初试中的爸爸ROLE）</h3>
      <p>本人基本情况，高考数学没及格。大学数学也学得不好。根据自己严格的做题方法和做题步骤，最终能够拿到这个成绩，真的很不容易。<strong>Trust Me</strong>，考研数学，其实没有想象中的那么难。</p>
<p>数学整体题目分布（转自新东方网）：</p>
<p><strong>数学一：</strong><br><img   src="https://img-blog.csdnimg.cn/20210409172313915.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>数学二</strong><br><img   src="https://img-blog.csdnimg.cn/20210409172350108.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<p><strong>数学三</strong><br><img   src="https://img-blog.csdnimg.cn/2021040917240528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70" style="width: image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,tepx;height: t_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQzNDQ1MDY3,size_16,color_FFFFFF,t_70px;"  alt="在这里插入图片描述"></p>
<ul>
<li>针对数学二部分的备考经验、以及各个Section的备考方法。同在我个人博客网站中，链接如下：</li>
</ul>
<p><a href="https://bruce-jj.gitee.io/blog/2021/04/09/%E4%B8%8D%E4%BC%9A%E5%90%A7%E8%80%83%E7%A0%94%E6%95%B0%E5%AD%A6/">考研数学到底怎么样才能上一百分？我来告诉你…</a></p>

        <h3 id="让人头疼的英语"   >
          <a href="#让人头疼的英语" class="heading-link"><i class="fas fa-link"></i></a><a href="#让人头疼的英语" class="headerlink" title="让人头疼的英语"></a>让人头疼的英语</h3>
      <p>考研英语分为英语二与英语一，本人基本情况是，大一通过四六级。</p>
<p>回归考研英语本身：</p>
<p>题目分布：</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 完形填空<span class="number">20</span>个（每个<span class="number">0.5</span>分）共<span class="number">10</span>分</span><br><span class="line"><span class="number">2.</span> 经典阅读理解题，四篇<span class="number">20</span>个，每个<span class="number">2</span>分，共<span class="number">40</span>分</span><br><span class="line"><span class="number">3.</span> 新题型（段落匹配、连线等）<span class="number">10</span>分</span><br><span class="line"><span class="number">4.</span> 英译汉（<span class="number">15</span>分）</span><br><span class="line"><span class="number">5.</span> 作文一：书信<span class="number">10</span>分</span><br><span class="line"><span class="number">6.</span> 作文二：图表<span class="number">15</span>分</span><br></pre></td></tr></table></div></figure>

<p>英语一不同的地方在于，书信是一样的，但是<strong>图表作文换成了图画作文。</strong></p>
<p>同时英语二的翻译是，<strong>翻译整篇短文</strong></p>
<p>英语一的翻译是：<strong>挑选一篇文章中的五句话，要求结合上下文进行翻译</strong></p>
<ul>
<li>针对英语部分的备考经验以及各个Section的备考方法。同在我个人博客网站中，链接如下：</li>
</ul>
<p><a href="https://bruce-jj.gitee.io/blog/2021/03/11/%E4%B8%8D%E4%BC%9A%E5%90%A7%E8%80%83%E7%A0%94%E8%8B%B1%E8%AF%AD/">不会吧？都2021年了，还有人觉得考研英语简单！？</a></p>

        <h3 id="“价值连城”的政治！"   >
          <a href="#“价值连城”的政治！" class="heading-link"><i class="fas fa-link"></i></a><a href="#“价值连城”的政治！" class="headerlink" title="“价值连城”的政治！"></a>“价值连城”的政治！</h3>
      <p>政治是很重要的科目，同时政治也是比较容易速成的科目！</p>
<p>总体而言，考研政治分为几大板块：</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 第一部分 马克思主义基本原理概论（马原）</span><br><span class="line"><span class="number">2.</span> 第二部分 毛泽东思想和中国特色社会主义理论体系概论（毛中特</span><br><span class="line"><span class="number">3.</span> 第三部分 中国近现代史纲要（近现代史）</span><br><span class="line"><span class="number">4.</span> 第四部分 思想道德修养与法律基础（思修法基</span><br></pre></td></tr></table></div></figure>

<p>其中，马原占到试卷的24%，</p>
<p>毛中特占到试卷的30%，</p>
<p>近现代史占到14%</p>
<p>最后思修法基占到16%</p>
<p>总共38道题，1~16题是单项选择题，</p>
<p>17~33题是多选题<strong>（多选题是爸爸，分值高分值低都看多选题！！！）</strong></p>
<p>最后的34~38题是分析题<strong>（分析题也可以挽救你，只要你字写得好看，答题1、2、3地按序，按重点答）</strong></p>
<ul>
<li>针对政治部分的备考经验以及各个Section的备考方法。同在我个人博客网站中，链接如下：</li>
</ul>
<p><a href="https://bruce-jj.gitee.io/blog/2021/04/09/%E4%B8%8D%E4%BC%9A%E5%90%A7%E8%80%83%E7%A0%94%E6%94%BF%E6%B2%BB/">政治上60分就够了？不是吧，你一定要看看</a></p>

        <h3 id="备受“争议”的专业课"   >
          <a href="#备受“争议”的专业课" class="heading-link"><i class="fas fa-link"></i></a><a href="#备受“争议”的专业课" class="headerlink" title="备受“争议”的专业课"></a>备受“争议”的专业课</h3>
      <p>专业课满分150分，各个院校的专业课组成部分不同。</p>
<p>譬如有的考两三门，有的考一门，有的考四门：</p>
<p>但大致上，针对计算机专业的大部分院校，都由以下几门专业课组成：</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">数据结构 严蔚敏著</span><br><span class="line"></span><br><span class="line">计算机网络 谢希仁著</span><br><span class="line"></span><br><span class="line">操作系统 汤子瀛著</span><br><span class="line"></span><br><span class="line">计算机组成原理 唐朔飞著</span><br></pre></td></tr></table></div></figure>

<p>我备考的时候专硕只考一门课：计算机网络</p>
<p><strong>参考书目是：谢希仁著的，《计算机网络》（第七版）</strong></p>
<p>总体来说，这门课考得有点不好，91分。</p>
<p>这是我没有想到的，但是我想肯定是自己在答题方面，没有发挥好。</p>
<p>OR</p>
<p>就是自己太菜了！</p>
<p>部分知识理解 就不跟大家分享了~</p>
<p>那么主要是还是要从备考本身 </p>
<p><strong>分享一些好的学习 渠道吧</strong></p>

        <h4 id="☆-王道还是天勤？"   >
          <a href="#☆-王道还是天勤？" class="heading-link"><i class="fas fa-link"></i></a><a href="#☆-王道还是天勤？" class="headerlink" title="☆ 王道还是天勤？"></a>☆ 王道还是天勤？</h4>
      <p>了解计算机考研的都应该知道这两个机构。</p>
<p>其实我想说，不管是王道的<strong>计算机网络讲义</strong>还是天勤的<strong>高分笔记</strong></p>
<p>都是大牛编者编写的，只不过在个人使用方面，</p>
<p>我比较推荐都看哈哈哈哈！</p>

        <h4 id="☆-思维导图有多重要？"   >
          <a href="#☆-思维导图有多重要？" class="heading-link"><i class="fas fa-link"></i></a><a href="#☆-思维导图有多重要？" class="headerlink" title="☆ 思维导图有多重要？"></a>☆ 思维导图有多重要？</h4>
      <p><strong>重要的事情说三遍：很重要，很重要，很重要！</strong></p>
<p>对于计算机网络这门课程，一定要有思维导图，</p>
<p>当然如果你购买了王道、天勤的课程或者他们的书籍</p>
<p>一定是会有相应的思维导图的！</p>
<p>对于这门课程，我想整体一定要有清楚的认知。每章的重点在哪里？</p>

        <h4 id="☆-历年真题！！！Five-Stars-☆☆☆☆☆"   >
          <a href="#☆-历年真题！！！Five-Stars-☆☆☆☆☆" class="heading-link"><i class="fas fa-link"></i></a><a href="#☆-历年真题！！！Five-Stars-☆☆☆☆☆" class="headerlink" title="☆ 历年真题！！！Five Stars ☆☆☆☆☆"></a>☆ 历年真题！！！Five Stars ☆☆☆☆☆</h4>
      <p>针对目标院校的真题，一定要反复研读！</p>
<p>很多题目，不说完全重复，但是非常相近！</p>
<p>不是这个考点，就是这个考点的情况，非常多！！！务必引起大家的重视。</p>

        <h1 id="复试过程-Re-Examination"   >
          <a href="#复试过程-Re-Examination" class="heading-link"><i class="fas fa-link"></i></a><a href="#复试过程-Re-Examination" class="headerlink" title="复试过程 Re-Examination"></a>复试过程 Re-Examination</h1>
      
        <h2 id="1-复试环节介绍"   >
          <a href="#1-复试环节介绍" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-复试环节介绍" class="headerlink" title="1.复试环节介绍"></a>1.复试环节介绍</h2>
      <p>由于今年，我们学校仍旧按照<strong>线上复试</strong>的要求进行。</p>
<p>因此大致分为以下几个阶段：</p>
<figure class="highlight java"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"># Day1 复试笔试过程</span><br><span class="line"># （开卷答题，在规定时间内，收到学校邮箱传来的附件后，打开PDF题目进行作答）</span><br><span class="line">	C++/C语言作答（其他语言不敢保证）</span><br><span class="line">	时间是：<span class="number">2</span>:<span class="number">30</span>~<span class="number">5</span>:<span class="number">00</span> 在规定时间内 发送附件至指定官方邮箱</span><br><span class="line"># Day2 复试面试过程</span><br><span class="line"># （全程两个机位，第一个机位是笔记本电脑摄像头，第二个机位是右后方<span class="number">45</span>度角的其他摄像头）</span><br><span class="line">	① 首先是英语口语：英语介绍/中文介绍 &#123;</span><br><span class="line">		一定要恰当好处！</span><br><span class="line">		说个实在的，老师想听到的，</span><br><span class="line">		是一个研究生的自我介绍！</span><br><span class="line">		是跟自己总结本科，总结专业，总结学习的自我介绍！</span><br><span class="line">		英语表达可以不用很高级的词汇，但是一定要突出你的</span><br><span class="line">		# 专业领域词汇、学习词汇、实习经历 # </span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	② 其次是Day1的笔试复述！这里是重点：&#123;</span><br><span class="line">		虽然你做出来了笔试题目，但是老师在这里考察的是你对自己程序思路的把控！</span><br><span class="line">		（可以询问老师投屏）经老师同意后 投屏讲解</span><br><span class="line">		注意代码中的命名规范，代码整体规范以及思路规范。</span><br><span class="line">		</span><br><span class="line">		最后可以拓展自己的代码，中途存在的缺陷？如何改进？减少时间复杂度。</span><br><span class="line">		其实最重要的，是你讲解的过程！我再说一遍，你一定要把老师讲懂！</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	③ 最后是综合面试，针对你的简历，你的本科学习阶段，对你进行提问！</span><br><span class="line">	注意，大多跟专业知识有关。</span><br><span class="line">	这里不方便提供自己导师问的问题。大家可以去网上搜索看常见的问题。</span><br><span class="line">	</span><br><span class="line">	④ 最后可以会有附加的英文听力问题，也是老师用英文问你问题！</span><br><span class="line">	然后用英文回答！</span><br><span class="line">	如果老师问的问题是：你喜欢打游戏吗？</span><br><span class="line">	想想看，咱们应该如何用英语回答老师呢？</span><br><span class="line">	</span><br><span class="line">	KEY：可以不用很高级的词汇，但是要通顺，要让老师听懂！不要讲太快。</span><br><span class="line">		 要用研究生该有的答题思路，老师问你喜欢读什么书？不是想问你喜欢读什么书？</span><br><span class="line">		 而是想问你，作为一个大学生，应该读什么书？如果回答的是跟专业书有关，那是</span><br><span class="line">		 自然更好的了。</span><br><span class="line">		 </span><br><span class="line">		 面试过程中，要彬彬有礼，不要吊儿郎当！要对老师有礼貌。不要尝试打断老师的</span><br><span class="line">		 说话过程。</span><br></pre></td></tr></table></div></figure>


        <h1 id="我的建议：Recommendation"   >
          <a href="#我的建议：Recommendation" class="heading-link"><i class="fas fa-link"></i></a><a href="#我的建议：Recommendation" class="headerlink" title="我的建议：Recommendation"></a>我的建议：Recommendation</h1>
      
        <h2 id="1-如果能有跟自己并肩作战的研友是最好不过的了！"   >
          <a href="#1-如果能有跟自己并肩作战的研友是最好不过的了！" class="heading-link"><i class="fas fa-link"></i></a><a href="#1-如果能有跟自己并肩作战的研友是最好不过的了！" class="headerlink" title="1. 如果能有跟自己并肩作战的研友是最好不过的了！"></a>1. 如果能有跟自己并肩作战的研友是最好不过的了！</h2>
      
        <h2 id="2-一定要去图书馆！！！"   >
          <a href="#2-一定要去图书馆！！！" class="heading-link"><i class="fas fa-link"></i></a><a href="#2-一定要去图书馆！！！" class="headerlink" title="2. 一定要去图书馆！！！"></a>2. 一定要去图书馆！！！</h2>
      
        <h2 id="3-重要的是效率！高效的6h-gt-盲目的12h"   >
          <a href="#3-重要的是效率！高效的6h-gt-盲目的12h" class="heading-link"><i class="fas fa-link"></i></a><a href="#3-重要的是效率！高效的6h-gt-盲目的12h" class="headerlink" title="3. 重要的是效率！高效的6h &gt; 盲目的12h"></a>3. 重要的是效率！高效的6h &gt; 盲目的12h</h2>
      
        <h2 id="4-学累了就放松-放松够了就继续冲！"   >
          <a href="#4-学累了就放松-放松够了就继续冲！" class="heading-link"><i class="fas fa-link"></i></a><a href="#4-学累了就放松-放松够了就继续冲！" class="headerlink" title="4. 学累了就放松 放松够了就继续冲！"></a>4. 学累了就放松 放松够了就继续冲！</h2>
      
        <h2 id="5-考研不是终点-考上了也要付出多出常人的努力！"   >
          <a href="#5-考研不是终点-考上了也要付出多出常人的努力！" class="heading-link"><i class="fas fa-link"></i></a><a href="#5-考研不是终点-考上了也要付出多出常人的努力！" class="headerlink" title="5. 考研不是终点 考上了也要付出多出常人的努力！"></a>5. 考研不是终点 考上了也要付出多出常人的努力！</h2>
      
        <h3 id="（考不考得上-你都是王者-需要这种心态！）"   >
          <a href="#（考不考得上-你都是王者-需要这种心态！）" class="heading-link"><i class="fas fa-link"></i></a><a href="#（考不考得上-你都是王者-需要这种心态！）" class="headerlink" title="（考不考得上 你都是王者 需要这种心态！）"></a>（考不考得上 你都是王者 需要这种心态！）</h3>
      
        <h2 id="6-遇到自己喜欢的另一半-就在一起吧-不要错过爱情"   >
          <a href="#6-遇到自己喜欢的另一半-就在一起吧-不要错过爱情" class="heading-link"><i class="fas fa-link"></i></a><a href="#6-遇到自己喜欢的另一半-就在一起吧-不要错过爱情" class="headerlink" title="6. 遇到自己喜欢的另一半 就在一起吧 不要错过爱情~"></a>6. 遇到自己喜欢的另一半 就在一起吧 不要错过爱情~</h2>
      </div></div></article></section><nav class="paginator"><div class="paginator-inner"><a class="extend prev" rel="prev" href="/blog/"><i class="fas fa-angle-left"></i></a><a class="page-number" href="/blog/">1</a><span class="page-number current">2</span><a class="page-number" href="/blog/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/blog/page/5/">5</a><a class="extend next" rel="next" href="/blog/page/3/"><i class="fas fa-angle-right"></i></a></div></nav></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><section class="sidebar-toc hide"></section><!-- ov = overview--><section class="sidebar-ov"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/blog/images/avatar.jpg" alt="avatar"></div><p class="sidebar-ov-author__text">C'est la vie</p></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/blog/archives/"><div class="sidebar-ov-state-item__count">48</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/blog/categories/"><div class="sidebar-ov-state-item__count">19</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/blog/tags/"><div class="sidebar-ov-state-item__count">20</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/blog/images/cc-by-nc-sa.svg"></a></div></section></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2021</span><span class="footer__icon"><i class="fas fa-heart"></i></span><span>何水浪</span></div><div><span>由 <a href="http://hexo.io/" title="Hexo" target="_blank" rel="noopener">Hexo</a> 强力驱动</span><span> v5.4.0</span><span class="footer__devider">|</span><span>主题 - <a href="https://github.com/liuyib/hexo-theme-stun/" title="Stun" target="_blank" rel="noopener">Stun</a></span><span> v2.6.2</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><div class="search-mask"></div><div class="search-popup"><span class="search-close"></span><div class="search-input"><input placeholder="搜索文章（支持多关键词，请用空格分隔）"></div><div class="search-results"></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script>function initSearch() {
  var isXML = true;
  var search_path = 'search.json';

  if (!search_path) {
    search_path = 'search.xml';
  } else if (/json$/i.test(search_path)) {
    isXML = false;
  }

  var path = '/blog/' + search_path;
  $.ajax({
    url: path,
    dataType: isXML ? 'xml' : 'json',
    async: true,
    success: function (res) {
      var datas = isXML ? $('entry', res).map(function () {
        // 将 XML 转为 JSON
        return {
          title: $('title', this).text(),
          content: $('content', this).text(),
          url: $('url', this).text()
        };
      }).get() : res;
      var $input = $('.search-input input');
      var $result = $('.search-results');
      // 搜索对象（标题、内容）的权重，影响显示顺序
      var WEIGHT = { title: 100, content: 1 };
      var searchPost = function () {
        var searchText = $input.val().toLowerCase().trim();
        // 根据空白字符分隔关键字
        var keywords = searchText.split(/[\s]+/);
        // 搜索结果
        var matchPosts = [];

        // 有多个关键字时，将原文字整个保存下来
        if (keywords.length > 1) {
          keywords.push(searchText);
        }
        // 防止未输入字符时搜索
        if (searchText.length > 0) {
          datas.forEach(function (data) {
            var isMatch  = false;
            // 没有标题的文章使用预设的 i18n 变量代替
            var title = (data.title && data.title.trim()) || '[ 文章无标题 ]';
            var titleLower = title && title.toLowerCase();
            // 删除 HTML 标签 和 所有空白字符
            var content = data.content && data.content.replace(/<[^>]+>/g, '');
            var contentLower = content && content.toLowerCase();
            // 删除重复的 /
            var postURL = data.url && decodeURI(data.url).replace(/\/{2,}/g, '/');
            // 标题中匹配到的关键词
            var titleHitSlice = [];
            // 内容中匹配到的关键词
            var contentHitSlice = [];

            keywords.forEach(function (keyword) {
              /**
              * 获取匹配的关键词的索引
              * @param {String} keyword 要匹配的关键字
              * @param {String} text 原文字
              * @param {Boolean} caseSensitive 是否区分大小写
              * @param {Number} weight 匹配对象的权重。权重大的优先显示
              * @return {Array}
              */
              function getIndexByword (word, text, caseSensitive, weight) {
                if (!word || !text) {
                  return [];
                };

                var startIndex = 0; // 每次匹配的开始索引
                var index = -1;     // 匹配到的索引值
                var result = [];    // 匹配结果

                if (!caseSensitive) {
                  word = word.toLowerCase();
                  text = text.toLowerCase();
                }

                while((index = text.indexOf(word, startIndex)) !== -1) {
                  var hasMatch = false;
                  // 索引位置相同的关键词，保留长度较长的
                  titleHitSlice.forEach(function (hit) {
                    if (hit.index === index && hit.word.length < word.length) {
                      hit.word = word;
                      hasMatch = true;
                    }
                  });
                  startIndex = index + word.length;
                  !hasMatch && result.push({ index: index, word: word, weight: weight });
                }
                return result;
              }
              titleHitSlice = titleHitSlice.concat(getIndexByword(keyword, titleLower, false, WEIGHT.title));
              contentHitSlice = contentHitSlice.concat(getIndexByword(keyword, contentLower, false, WEIGHT.content));
            });

            var hitTitle = titleHitSlice.length;
            var hitContent = contentHitSlice.length;

            if (hitTitle > 0 || hitContent > 0) {
              isMatch = true;
            }
            if (isMatch) {
              ;[titleHitSlice, contentHitSlice].forEach(function (hit) {
                // 按照匹配文字的索引的递增顺序排序
                hit.sort(function (left, right) {
                  return left.index - right.index;
                });
              });
              /**
              * 给文本中匹配到的关键词添加标记，从而进行高亮显示
              * @param {String} text 原文本
              * @param {Array} hitSlice 匹配项的索引信息
              * @param {Number} start 开始索引
              * @param {Number} end 结束索引
              * @return {String}
              */
              function highlightKeyword (text, hitSlice, start, end) {
                if (!text || !hitSlice || !hitSlice.length) {
                  return;
                }

                var result = '';
                var startIndex = start;
                var endIndex = end;
                hitSlice.forEach(function (hit) {
                  if (hit.index < startIndex) {
                    return;
                  }

                  var hitWordEnd = hit.index + hit.word.length;
                  result += text.slice(startIndex, hit.index);
                  result += '<b>' + text.slice(hit.index, hitWordEnd) + '</b>';
                  startIndex = hitWordEnd;
                });
                result += text.slice(startIndex, endIndex);
                return result;
              }

              var postData = {};
              // 文章总的搜索权重
              var postWeight = titleHitSlice.length * WEIGHT.title + contentHitSlice.length * WEIGHT.content;
              // 标记匹配关键词后的标题
              var postTitle = highlightKeyword(title, titleHitSlice, 0, title.length) || title;
              // 标记匹配关键词后的内容
              var postContent;
              // 显示内容的长度
              var SHOW_WORD_LENGTH = 200;
              // 命中关键词前的字符显示长度
              var SHOW_WORD_FRONT_LENGTH = 20;
              var SHOW_WORD_END_LENGTH = SHOW_WORD_LENGTH - SHOW_WORD_FRONT_LENGTH;

              // 截取匹配的第一个字符，前后共 200 个字符来显示
              if (contentHitSlice.length > 0) {
                var firstIndex = contentHitSlice[0].index;
                var start = firstIndex > SHOW_WORD_FRONT_LENGTH ? firstIndex - SHOW_WORD_FRONT_LENGTH : 0;
                var end = firstIndex + SHOW_WORD_END_LENGTH;
                postContent = highlightKeyword(content, contentHitSlice, start, end);
              } else { // 未匹配到内容，直接截取前 200 个字符来显示
                postContent = content.slice(0, SHOW_WORD_LENGTH);
              }
              postData.title = postTitle;
              postData.content = postContent;
              postData.url = postURL;
              postData.weight = postWeight;
              matchPosts.push(postData);
            }
          });
        }

        var resultInnerHtml = '';
        if (matchPosts.length) {
          // 按权重递增的顺序排序，使权重大的优先显示
          matchPosts.sort(function (left, right) {
            return right.weight - left.weight;
          });
          resultInnerHtml += '<ul>';
          matchPosts.forEach(function (post) {
            resultInnerHtml += '<li><a class="search-results-title" href="' + post.url + '">';
            resultInnerHtml += post.title;
            resultInnerHtml += '</a><div class="search-results-content">';
            resultInnerHtml += post.content;
            resultInnerHtml += '</div></li>';
          });
          resultInnerHtml += '</ul>';
        } else {
          resultInnerHtml += '<div class="search-results-none"><i class="far fa-meh"></i></div>';
        }
        $result.html(resultInnerHtml);
      };
      $input.on('input', searchPost);
      $input.on('keyup', function (e) {
        if (e.keyCode === Stun.utils.codeToKeyCode('Enter')) {
          searchPost();
        }
      });
    }
  });
}

function closeSearch () {
  $('body').css({ overflow: 'auto' });
  $('.search-popup').css({ display: 'none' });
  $('.search-mask').css({ display: 'none' });
}

window.addEventListener('DOMContentLoaded', function () {
  Stun.utils.pjaxReloadLocalSearch = function () {
    $('.header-nav-search').on('click', function (e) {
      e.stopPropagation();
      $('body').css('overflow', 'hidden');
      $('.search-popup')
        .velocity('stop')
        .velocity('transition.expandIn', {
          duration: 300,
          complete: function () {
            $('.search-popup input').focus();
          }
        });
      $('.search-mask')
        .velocity('stop')
        .velocity('transition.fadeIn', {
          duration: 300
        });

      initSearch();
    });
    $('.search-mask, .search-close').on('click', function () {
      closeSearch();
    });
    $(document).on('keydown', function (e) {
      // Escape <=> 27
      if (e.keyCode === Stun.utils.codeToKeyCode('Escape')) {
        closeSearch();
      }
    });
  };

  Stun.utils.pjaxReloadLocalSearch();
}, false);

function safeOpenUrl(url) {
  var newTab = window.open();
  newTab.opener = null;
  newTab.location = url;
}

function extSearch(engine) {
  var engines = {
    google: 'https://www.google.com/search?q=',
    bing: 'https://cn.bing.com/search?q=',
    baidu: 'https://www.baidu.com/s?ie=UTF-8&wd=',
  };
  var host = window.location.host;
  var query = $('.search-input input').val().toLowerCase().trim();
  var uri = engines[engine] + query + ' site:' + host;

  if (query) {
    safeOpenUrl(uri);
  } else {
    Stun.utils.popAlert('warning', '请输入字符');
  }
}

var assistSearchList = window.CONFIG.assistSearch;

if (Array.isArray(assistSearchList)) {
  assistSearchList.forEach(function (name) {
    document.querySelector('.search-btns-item--' + name).addEventListener('click', function () {
      extSearch(name);
    }, false);
  });
}</script><script src="/blog/js/utils.js?v=2.6.2"></script><script src="/blog/js/stun-boot.js?v=2.6.2"></script><script src="/blog/js/scroll.js?v=2.6.2"></script><script src="/blog/js/header.js?v=2.6.2"></script><script src="/blog/js/sidebar.js?v=2.6.2"></script><script type="application/json" src="/blog/search.json"></script></body></html>